假设我有一个类型为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}"
在这种情况下起作用。为什么standalone: true
实际意味着什么,因为我找不到任何关于它的文档?
答案 0 :(得分:55)
使用@angular/forms
标记时使用<form>
会自动创建FormGroup
。
对于标记为ngModel
的每个<input>
,它会创建一个FormControl
并将其添加到上面创建的FormGroup
中;此FormControl
将使用FormGroup
属性name
命名。
示例:
<form #f="ngForm">
<input type="text" [(ngModel)]="firstFieldVariable" name="firstField">
<span>{{ f.controls['firstField']?.value }}</span>
</form>
说这个,你的问题的答案如下。
当您将其标记为standalone: true
时,这不会发生(它不会添加到FormGroup
)。
参考:https://github.com/angular/angular/issues/9230#issuecomment-228116474
答案 1 :(得分:7)
对我来说代码:
<form (submit)="addTodo()">
<input type="text" [(ngModel)]="text">
</form>
抛出错误,但我在输入中添加了name属性:
<form (submit)="addTodo()">
<input type="text" [(ngModel)]="text" name="text">
</form>
它开始起作用了。
答案 2 :(得分:1)
<form (submit)="addTodo()">
<input type="text" [(ngModel)]="text">
</form>