Angular 8：在內部組件中實現 formControlName

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();

原裝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>

新 InputText.html

現在在嘗試為 Angular forms 應用 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 Name 包裝到不知道 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" 添加到您的輸入中