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中找到具有该特定名称的控件。

请注意，导致您的问题是因为您尝试在FormGroup FormGroup中找到名为second的{{1}}：

first

为了实现这一目标，您必须按照以下方式调整模型，其中<form [formGroup]="form"> <div formGroupName="first"> <div formGroupName="second"> </div> </div> </form>成为second的孩子：

first

emostafa的建议起作用的原因是因为您要求form = new FormGroup({ first: new FormGroup({ someId: new FormControl('587824'), second: new FormGroup({ someText: new FormControl('the sky is blue') }) }), });实例在模型中获得名为form的直接子项。在这种情况下确实存在。

Angular - Reactive Forms - FormGroupName中的FormGroupName

1 个答案: