如何将 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模型驱动表单中的组件

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

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 表单组:

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 上的方法

And the method on your 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屋！