假设我有一个类型为Mailtype的打字稿对象,如下所示:
export class Mailtype { constructor( public name?: string,public locale?: string,public email?: string,public properties? : Property[] ) { } }
export class Property { constructor( public name?: string,public type?: string,public example?: string,public required?: boolean,public masked?: boolean ) { } }
现在在我的组件中我有一个Mailtype对象,html有一个表单元素,用于编辑和添加到Mailtype的属性数组:
<form> <tr *ngFor="let property of model.properties; let i=index"> <td> <input type="text" [(ngModel)]="property.name" required> </td> </tr> <button (click)="onAddProperty()">Add property</button> </form>
零件:
export class MailtypeComponent { model : Mailtype; constructor() { this.model = new Mailtype('','',[]); this.model.properties.push(new Property()); } onAddProperty() { this.model.properties.push(new Property()); } }
我想知道我是否不允许使用[(ngModel)]链接到数组中数组元素的引用“属性”,特别是在我迭代数组的同时?因为它会为以上代码抛出以下错误:
ORIGINAL EXCEPTION: 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. Example 1: <input [(ngModel)]="person.firstName" name="first"> Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
所以它建议我使用[ngModelOptions] =“{standalone:true}”或者在html中添加名称字段.在这种情况下看起来像[ngModelOptions] =“{standalone:true}”.为什么独立:true实际意味着因为我找不到任何关于它的文档?
使用< form>时使用@ angular / forms标记它会自动创建一个FormGroup.
原文链接:https://www.f2er.com/angularjs/143740.html对于每个包含的ngModel标记的< input>它将创建一个FormControl并将其添加到上面创建的FormGroup中;此FormControl将使用属性名称命名为FormGroup.
例:
<form #f="ngForm"> <input type="text" [(ngModel)]="firstFieldVariable" name="firstField"> <span>{{ f.controls['firstField']?.value }}</span> </form>
说到这里,你问题的答案如下.
当您将其标记为独立时:如果不会发生这种情况(它将不会添加到FormGroup中).
参考:https://github.com/angular/angular/issues/9230#issuecomment-228116474