将 FormArray 动态添加到 FormGroup 不起作用 Angular答案

【问题标题】：Dynamically adding FormArray to the FormGroup is not working Angular将 FormArray 动态添加到 FormGroup 不起作用 Angular
【发布时间】：2020-04-26 18:56:34
【问题描述】：

我正在使用 Angular 8 和 Reactive Form。

我想将FormArray控件添加到主窗体组。

组件是

export class RsvpComponent implements OnInit {

  form: FormGroup;

  constructor(
    private fb: FormBuilder
  ) { }

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

  public addGuest() {
    if (!this.form.get('guests')) {
      this.addGuestControl();
    }

    this.getGuestControlArray().push(this.guestControl());
  }

  private addGuestControl() {
    this.form.addControl('guests', new FormArray([]));
  }

  private getGuestControlArray() {
    return this.form.get('guests') as FormArray;
  }

  private guestControl(): FormGroup {
    const guestGroup = this.fb.group({
      name: ['', [
        Validators.required
      ]]
    });

    return guestGroup;
  }

  onSubmit() {
    console.log('submitted: ', this.form.value);
  }
}

点击按钮会调用addGuest。默认情况下不会有客人，因此表单中没有guests 控件。

在调用addGuest 方法时，它首先检查guests 控件是否存在，如果不存在则首先添加FormArray 类型的控件。

这在第一次单击并添加控件时工作正常，但在单击 submit 按钮时，会调用 onSubmit 并且添加的访客数据不在值中。

当再次调用addGuest 时，guests 控件的检查失败。

Stackbliz：https://stackblitz.com/edit/angular-bipdyu

奇怪的情况：代码在 Stackblitz 中运行，但是当我在我的组件中复制相同的代码时（删除所有内容），它不起作用。

【问题讨论】：

如果可能，然后提供 stackblitz
我在问题中添加了 stackblitz url。但这似乎很奇怪，同样的事情在 Stackblitz 中有效，但在我的应用程序中无效。
检查控制台错误
在您的模板中，formControlName='guests'(或 [formControl]="...") 绑定到组件或 DOM 元素？
@Andrei 控件尚未注册。

标签： angular angular-reactive-forms

【解决方案1】：

据我所知，您需要更改 guestControl() 方法以返回 FormControl 而不是 FormGroup。 FormGroup 无法跟踪内部值，它仅充当“分组”（！）您的 FormControls 的上级结构。对于任何实际价值，您都需要这些。

private guestControl(): FormControl {
  const guestControl = this.fb.control('', Validators.required);
  return guestControl;
}

应该做的伎俩。

【讨论】：

我不认为这是一个有效的语法。 FormControl 的第一个参数应该是 formState，它可以是原始值（例如：''/null）或装箱值（{ value: '', disabled: false }）。 Source
如果是这种情况，那么删除返回类型应该可以工作。但它不起作用。
你完全正确。以上应该修复语法
FormGroup 无法跟踪内部值 整个表单是FormGroup，但它确实跟踪值和状态。

【解决方案2】：

该问题与 Angular 中的变更检测策略有关。

同样的答案在这里：Angular @Input binding using function calling multiple times

【讨论】：