利用“@angular/forms" 创建表单的时候,系统默认会创建一个”FormGroup"的对象。
使用带有“ngModel"的”“标签时,系统会自动为这个标签创建一个叫做”FormControl"的对象,并且会自动把它添加到”FormGroup"中。而“FormControl"在”FomGroup“中是用""标签上的”name"属性来做标识的。
<form #f="ngForm">
<input type="text" [(ngModel)]="firstFieldVariable" name="firstField">
<span>{{ f.controls['firstField']?.value }}</span>
</form>
如果没有使用“name”这个属性,那系统就会报错:
<form #f="ngForm">
<input type="text" [(ngModel)]="firstFieldVariable">
</form>
Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.
解决方法除了把“name”属性添加上外,还有第二种选择,就是给""标签设置一个ngModelOptions
属性:[ngModelOptions]="{standalone: true}"
当设置了这个属性,的 FormControl 对象就不会添加到FormGroup内,也就不能通过{{ f.controls[‘firstField’]?.value }} 索引到该对象的值了。