Angular - 反应式表单 - FormGroupName 内的 FormGroupName

Question

我有一个从 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 中，或者是否有更好的方法可以使用响应式表单来实现相同的结果？

Answer 1

是的。 formGroupName 可以嵌套在另一个 formGroupName 中。

formGroupName 和 formControlName 属性通过在父级 FormGroup 中查找具有该特定名称的控件来工作。

请注意，您的问题是由于您试图在 first FormGroup 中查找名为 second 的 FormGroup 引起的：

<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 的直接子代。在这种情况下确实存在。