如何向另一个 formGroup 中添加一个 formGroup？

Question

我找到了这个答案，它展示了如何向父表单添加表单控件：

在Angular2模型驱动表单中重用组件

但是我希望能够像这样向页面的不同区域添加新的表单组。

<form [formGroup]="myForm">
  <!--... other inputs -->
  <md-tab-group formGroupName="nutrition">
    <md-tab formGroupName="calories">
      <template md-stretch-tabs="always" md-tab-label>Calories</template>
      <template md-tab-content>
        <calories></calories> <!-- I want to add controll groups like this-->
      </template>
    </md-tab>
    <md-tab formGroupName="carbs">
      <template md-stretch-tabs="always" md-tab-label>Carbs</template>
      <template md-tab-content>
        <carbs></carbs>
      </template>
    </md-tab>
  </md-tab-group>
</form>

整个表单模型应该像这样：

{
   name: '',
   nutrition:{
      calories: {
        total: ''
        // more
      },
      carbs: {
        total: ''
        // more
      }
}

我已经能够像这样添加 nutrition formGroup: <nutrition [parentForm]="myForm"></nutrition>

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'nutrition',
  template: `
  <div [formGroup]="parentForm"></div>
  `
})
export class NutritionComponent implements OnInit {

    @Input() parentForm: FormGroup;

    nutritionGroup: FormGroup;

    constructor(private _fb: FormBuilder) {
    }

    ngOnInit() {
      this.nutritionGroup = new FormGroup({
        blank: new FormControl('', Validators.required)
      });
      this.parentForm.addControl('nutrition', this.nutritionGroup);
    }
}

但我无法想出如何将 nutrition 表单组传递给 calories 表单组，例如这样：<calories [parentControl]="nutrition"></calories>。

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'calories',
  template: ``
})
export class CaloriesComponent implements OnInit {

  @Input() parentControl: FormGroup;
  caloriesForm: FormGroup;

  constructor(private _fb: FormBuilder) {  }
  ngOnInit(){
    this.caloriesForm = new FormGroup({
        blank: new FormControl('', Validators.required)
      });

    this.parentControl.addControl('calories', this.caloriesForm);
  }
}

这可以做到吗？

- Nate May

---

你有这个问题的解决方案吗？我也遇到了同样的问题。 - LittleDragon

是的和不是的。我正在实现一个 ngrx 存储解决方案。我可以拥有许多组成单个父表单的表单，它们分别将其值保存到我的存储中。然后提交按钮会调度一个操作，该操作从存储中调用值。请注意此解决方案中的验证器复杂性。 - Nate May

这也可能有所帮助：https://dev59.com/clMI5IYBdhLWcg3wyurE - user3025289

Answer 1

如果你（或任何人）对此仍然感兴趣，在将控件添加到parentControl后，你需要将其传回父组件，以便进行更新。

import { Output, EventEmitter } from '@angular/core';

@Output() onFormGroupChange: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();

this.parentControl.addControl('calories', this.caloriesForm);
this.onFormGroupChange.emit(this.parentControl);

在父级 HTML 元素上，你需要将其重新分配回 parentControl:

(onFormGroupChange)="setParentControl($event)"

并且在你的 TypeScript 文件中有如下方法：

public setParentControl(formGroup: FormGroup) {
    this.myForm = formGroup;
}

然后您将在FormGroup myForm 中拥有控制权，并且可以在父元素上执行任何操作：

console.log(this.myForm.controls['calories'])

没有包含所有代码，只包含您需要的部分 :)

- William