Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angular – 如何将formGroup添加到另一个formGroup大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我找到了这个答案,它显示了如何将表单控件添加到父表单:

Reuse components in angular2 model driven forms

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

<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: {
        @R_421_10586@l: ''
        // more
      },carbs: {
        @R_421_10586@l: ''
        // more
      }
}

我已经能够像这样添加营养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);
    }
}

我无法弄清楚如何将营养形式组传递给卡路里formGroup,如下所示:

< calories [parentControl] =“营养”>< / calories>

import { Component,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之后,您需要将其发送回父组件,以便可以更新它.
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($事件)”

你的方法

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

然后,您将在FormGroup myForm中拥有控件,并在您的父元素上执行任何您喜欢的操作:
的console.log(this.myForm.controls [ ‘卡路里’])

没有包含所有代码,但只包含你需要的:)

大佬总结

以上是大佬教程为你收集整理的angular – 如何将formGroup添加到另一个formGroup全部内容,希望文章能够帮你解决angular – 如何将formGroup添加到另一个formGroup所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。