角反应形式- FormGroupName在FormGroupName内
角反应形式- FormGroupName在FormGroupName内
提问于 2018-05-13 20:21:07
我有一个从API返回的嵌套JSON响应，它的结构与在模板上显示它的方式不同，例如：
@Component({
selector: 'reactive-form-example',
styles: ['./reactive-form-example.component.css'],
template: `
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div formGroupName="first">
<input type="text" placeholder="some id" formControlName="someId">
<div formGroupName="second">
<input type="text" placeholder="some text" formControlName="someText">
</div>
</div>
</form>
`
})
export class ReactiveFormExampleComponent {
form = new FormGroup({
first: new FormGroup({
someId: new FormControl('587824')
}),
second: new FormGroup({
someText: new FormControl('the sky is blue')
})
});
onSubmit(value) {
console.log('Submit', this.form.value);
}
}问题：是否有可能在另一个formGroupName中嵌套formGroupName，或者是否有更好的方法使用反应性表单来实现相同的结果？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-13 21:19:53
是。formGroupName可以嵌套在另一个formGroupName中。
formGroupName和formControlName属性通过在父FormGroup中找到具有该特定名称的控件来工作。
请注意，您的问题是由于您试图在FormGroup FormGroup中找到名为second的first而引起的：
<form [formGroup]="form">
<div formGroupName="first">
<div formGroupName="second">
</div>
</div>
</form>要做到这一点，您必须按照以下方式调整您的模型，其中second成为first的子代
form = new FormGroup({
first: new FormGroup({
someId: new FormControl('587824'),
second: new FormGroup({
someText: new FormControl('the sky is blue')
})
}),
});emostafa的建议之所以有效，是因为您要求form实例在模型中获得一个名为second的直接子级。在这种情况下是存在的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50320307
复制相关文章
相似问题
腾讯云开发者
