如何将一个formGroup添加到另一个formGroup [英] How can I add a formGroup to another formGroup

问题描述

我找到了这个答案，该答案显示了如何将表单控件添加到父表单:

I found this answer which shows how I can add form controls to the parent form:

以angular2模型驱动的形式重复使用组件

但是我希望能够像这样将新的formGroup添加到页面的不同区域.

but I would like to be able to add new formGroups to different areas of the page like this.

<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>

整个表单模型应如下所示:

the whole form model should look like this:

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

我已经能够像这样添加nutrition formGroup:

I have been able to add the nutrition formGroup like this:

<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 formGroup，如下所示:

but I can't figure out how to pass in the nutrition form group to the calories formGroup like this:

<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);
  }
}

可以做到吗?

推荐答案

如果您仍然感兴趣(或任何人)，则在将控件添加到parentControl之后，需要将其发送回父组件，因此可以更新.

If you are (or anyone is) still interested, after adding the control to your parentControl, you need to emit it back to the parent component, so it can be updated.

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)"

On parent html element, you need to reasign it back to parentControl: (onFormGroupChange)="setParentControl($event)"

以及您ts上的方法

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

然后，您将在FormGroup myForm中拥有该控件，并在父元素上做任何您想做的事情: console.log(this.myForm.controls['calories'])

Then you will have the control in your FormGroup myForm and do whatever you like, on your parent element: console.log(this.myForm.controls['calories'])

没有包含所有代码，但仅包含您需要的内容:)

Haven't included all the code, but only what you need :)

这篇关于如何将一个formGroup添加到另一个formGroup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！