Angular 将 FormGroup 添加到 FormGroup

Question

我有一个 parent 组件，它是主要的 FormGroup。在这个 <my-parent></my-parent> 组件中，我有一个 child 组件，<my-child></my-child>。

child 组件有一个 *ngIf="some-conditional"，在 child 组件内，我有一个快速填充按钮，基本上可以 patchValue child FormGroup 控件。

成功将childFormGroup添加到parentFormGroup，但是parent里面的child的值是总是空的。

我尝试通过两种方式添加控件（均未成功），在 parent 组件中使用 setter，并从 child 组件内部发出并重新分配parent FormGroup.

的新值

这是一个 stackblitz 演示，其中包含我正在尝试执行的操作。提前致谢！

// PARENT COMPONENT

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

import {
  ChildComponent
} from './child.component';

@Component({
  selector: 'my-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./app.component.scss']
})
export class ParentComponent {
  isChildFormSet = false;
  showChildComponent = false;
  exampleParentForm: FormGroup;

  // @ViewChild(ChildComponent)
  // set userForm(childForm: ChildComponent) {
  //   if (childForm && !this.isChildFormSet) {
  //     this.isChildFormSet = true;
  //     setTimeout(() => {
  //       this.exampleParentForm.addControl('child', new FormGroup(childForm.exampleChildForm.controls));
  //     });
  //   }
  // }

  constructor(private fb: FormBuilder) {
    this.exampleParentForm = this.fb.group({
      parent: ['', Validators.required]
    })
  }

  submitForm(): void {
    console.log(this.exampleParentForm)
  }

  addChildComponent(): void {
    this.showChildComponent = true;
  }

  onChange(form) {
    // reset the form value to the newly emitted form group value.
    this.exampleParentForm = form;
  }
}


// CHILD COMPONENT

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

@Component({
  selector: 'my-child',
  templateUrl: './child.component.html',
  styleUrls: ['./app.component.scss']
})
export class ChildComponent implements OnInit {
  exampleChildForm: FormGroup;

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


  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.exampleChildForm = this.fb.group({
      child: ['', Validators.required]
    });

    this.addGroupToParent();
  }

  fillWithText() {
    this.exampleChildForm.patchValue({
      child: 'This is an exmple.'
    });
  }

  clearText(): void {
    this.exampleChildForm.get('child').setValue('');
  }

  private addGroupToParent(): void {
    this.formData.addControl('child', new FormGroup(this.exampleChildForm.controls));
    this.onFormGroupChange.emit(this.formData);
  }
}

<!-- PARENT COMPONENT -->

<div class="parent-container">
  <form [formGroup]="exampleParentForm" (submit)="submitForm()" novalidate>
    <div class="col-3">
      <input class="effect-1" type="text" placeholder="Parent Input" formControlName="parent" />
      <span class="focus-border"></span>
    </div>
    <my-child *ngIf="showChildComponent" [formData]="exampleParentForm" (onFormGroupChange)="onChange($event)">
    </my-child>
    <div>
      <button class="button parent" type="submit">Log Form Value</button>
    </div>
  </form>
  <button class="button small" type="button" (click)="addChildComponent()">Add Child Component</button>
</div>

<!-- CHILD COMPONENT -->

<div class="child-container" [formGroup]="exampleChildForm">
  <div class="col-3">
    <input class="effect-1" type="text" placeholder="Child Input" formControlName="child">
    <span class="focus-border"></span>
  </div>
  <div>
    <button class="button child" type="button" (click)="fillWithText()">Patch Value</button>
  </div>
</div>

Answer 1

无需向父组添加新的 FormGroup 实例，只需添加子表单组本身即可。

所以

this.formData.addControl('child', new FormGroup(this.exampleChildForm.controls));

变成

this.formData.addControl('child', this.exampleChildForm);

Forked Stackblitz

Angular 将 FormGroup 添加到 FormGroup

Angular add FormGroup to FormGroup

angular

angular-reactive-forms