ngModel
和 formControlName
不能同時在同一個表單控件上使用;
二者都用于在 Angular 中處理表單控件的值,但是它們的底層實現方式不同。
ngModel
是 Angular 提供的雙向數據綁定指令,它可以將表單控件的值與組件類中的屬性進行雙向綁定。當你使用 ngModel
綁定一個表單控件時,它會自動創建一個 FormControl
并與該控件進行綁定,同時還會更新模板和組件類中的屬性值。
formControlName
是 Angular 中的一個指令,用于將模板中的表單控件與響應式表單中的對應控件進行關聯。它通過提供的字符串參數來指定要綁定的表單控件的名稱,并將其與父級 FormGroup
或 FormArray
中的相應控件進行關聯。
由于 ngModel
和 formControlName
都用于處理表單控件的值,因此將它們同時應用于同一個表單控件會導致沖突。
通常情況下,建議使用響應式表單,并通過 formControlName
在模板中進行綁定,而不是使用 ngModel
。如果需要雙向綁定表單控件的值,可以使用 valueChanges
訂閱表單控件值的變化,并在組件類中手動更新屬性值。
<form [formGroup]="myForm"><input type="text" formControlName="myControl">
</form><form [formGroup]="paramForm"><input type="text" formControlName="myControl2">
</form>
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';@Component({selector: 'my-component',template: `...`
})
export class MyComponent implements OnInit {myForm: FormGroup;paramForm: FormGroup;constructor(private formbuilder: FormBuilder,) {this.paramForm = this.formbuilder.group({});}ngOnInit() {// 寫法1:this.myForm = new FormGroup({myControl: new FormControl()});// 寫法2:this.paramForm.addControl('myControl2',this.formbuilder.control('initialValue', [...]),); // ... 表示校驗內容}
}
上述示例創建了一個響應式表單,并將其與模板中的表單控件進行了綁定。通過 formControlName
指定了要綁定的表單控件的名稱,并在組件類中創建了相應的 FormControl
對象。這樣,表單控件的值將自動與組件類中的屬性保持同步。