Angular：将formControlName实现为一个不知道它的html组件

Question

我们正在用Kendo Telerik和Angular创建一个InputText组件。输入文本框具有自己的UX样式/感觉。如何将Angular中的formControl名称包装到其中？尝试时，收到以下错误。

原始InputText.ts

@Component({
  selector: 'app-input-text',
  templateUrl: './input-text.component.html',
  styleUrls: ['./input-text.component.scss']
})
export class InputTextComponent implements OnInit {
  @Input() MaxLength: number;
  @Input() FocusIn: boolean;
  @Input() Width: string;
  @Input() Value: string;
  @Input() FormControlName:string;   
  @Output() saveValue = new EventEmitter();

Original InputText.html

<div class="input-wrap">
  <div class=" cont" [style.width.px]="Width">
    <input kendoTextBox  #input
      [maxLength]="MaxLength ? MaxLength : '200'"
      [value]="Value ? Value : ''"
      (focusin)="handleEvents($event,'focusin')"
      (focusout)="handleEvents($event,'focusout')"
      (keyup)="handleEvents($event,'keyup')"
      (change)="saveValueAction($event)" />
    <button (click)="clear($event)"></button>
    <span class="validation"></span>
  </div>
</div>

New InputText.html

现在尝试为Angular表单应用formControlName，它不起作用，

formControlName="FormControlName"   // Added Line here

<div class="input-wrap">
  <div class=" cont" [style.width.px]="Width">
    <input kendoTextBox  #input
      [maxLength]="MaxLength ? MaxLength : '200'"
      [value]="Value ? Value : ''"
      formControlName="FormControlName"   // Added Line here
      (focusin)="handleEvents($event,'focusin')"
      (focusout)="handleEvents($event,'focusout')"
      (keyup)="handleEvents($event,'keyup')"
      (change)="saveValueAction($event)" />
    <button (click)="clear($event)"></button>
    <span class="validation"></span>
  </div>
</div>

我收到以下错误：将formControl名称包装到不知道formGroup的组件中的最佳方法是什么？

<app-inputtext  [Width] = "300" formControlName = "city"></app-app-inputtext> 

Uncaught Error: Template parse errors:
No provider for NgControl ("<div class="input-wrap">
<div class=" cont" [style.width.px]="Width">
[ERROR ->]<input kendoTextBox  #input

如果我尝试做常规的内联html，它会起作用。

<input type="text" class="textbox" name="city" formControlName = "city">  

Answer 1

您需要在输入中添加[（ngModel）] =“ value”