angular - 嵌套反应形式

Question

我有一个嵌套反应形式的角度应用程序。请验证我通过在 child 中传递父表单引用来嵌套表单的方法是否合适。另外，如果可能的话，建议我更好的方法。以下是我的代码的参考。 https://stackblitz.com/edit/angular-usmwua

/*parent component*/
profileForm:FormGroup = this.fb.group({
    firstName:['', Validators.required],
    lastName:[''],
    address:AddressComponent.generateAddressComponent()
})

/*child component*/
static generateAddressComponent(){
   return new FormGroup({
      city:new FormControl('',[Validators.required])
   })
}

标签： angularangular-reactive-forms

Answer 1

我相信将父表单传递给孩子会更好：

<child-component [form]="profileForm">

并从子组件添加到表单组：

  _form: FormGroup;
  @Input()
  get form(): FormGroup {
    return this._form;
  }

  set form(val: FormGroup) {
    this._form = val;
    this._form.addControl('address', new FormGroup({
      city:new FormControl('',[Validators.required])
   }));
  }