我想知道是否有一种方法可以使用 Angular 2 的 FormBuilder 设置嵌套属性,如下所示:
this.form = formBuilder.group({
name: ['', Validators.required],
email: ['', Validators.required],
address: {
state: ['ca', Validators.required], // <---- this gives an error
}
});
模板:
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<ion-item-divider color="light">Personal Data</ion-item-divider>
<ion-item>
<ion-label floating>Name</ion-label>
<ion-input type="text" formControlName="name"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input type="text" formControlName="email"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>State</ion-label>
<ion-input type="text" formControlName="address.state"></ion-input>
</ion-item>
</form>
这给了我一个错误,指出它找不到字段名称 state
,即使它在那里。
这对我有很大帮助,因为我的表格很长,最好能更好地组织它。
提前致谢。
最佳答案
Sasxa 回答到一半,但没有注意到您在模板评估部分看到了错误。因此发布模板很重要。
要修复它,您可以将模板的地址部分包装在一些不显眼的元素中,例如:
<span formGroupName="address">
<ion-item>
<ion-label floating>State</ion-label>
<ion-input type="text" formControlName="state"></ion-input>
</ion-item>
</span>
当您构建表单时,请按照建议进行操作:
address: formBuilder.group({
state: ['ca', Validators.required]
})
FormGroupName 的文档
关于angular - FormBuilder 中的嵌套属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41174533/