嵌套反应形式答案

【问题标题】：Nested reactive form嵌套反应形式
【发布时间】：2019-05-02 09:07:50
【问题描述】：

我有一个带有嵌套反应形式的角度应用程序。请验证我通过在 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])
   })
}

【问题讨论】：

不正确。你可以完成这项工作，但这是一个非常糟糕的设计。参考这个链接：scotch.io/tutorials/…
没有错。我个人也不喜欢它，但根据这个视频（kara 是@angular/forms 团队的一员），这很好，但有限制：youtube.com/watch?v=CD_t3m2WMM8。在这种情况下，我宁愿为地址组件实现ControlValueAccessor。
花点时间尝试自己实现上述链接。最好花一些时间而不是做错事。
我说它可能有效，但设计方法太糟糕了。错误将难以管理。在我提供的链接中，作者创建了地址组件。您也有类似的情况，但略有不同。好好阅读那个博客
我个人喜欢在父组件中创建表单并作为@Input 传递控件或组。啊!不需要创建自定义表单控件，也不需要使用 ControlValueAccessor，只需 [control]="profileForm.get('adress')"

标签： angular angular-reactive-forms

【解决方案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])
   }));
  }

【讨论】：