Angular 14反应形式addControl不起作用答案

【问题标题】：Angular 14 reactive forms addControl not workingAngular 14反应形式addControl不起作用
【发布时间】：2022-10-07 03:11:00
【问题描述】：

我最近迁移到 Angular 14，这行代码在尝试从控件动态添加新控件时抛出异常：

formGroup.addControl(\"agreement\", new FormControl(\"\"));

错误：

error TS2769: No overload matches this call. 
FormControl<...>; }>\' is not assignable to method\'s \'this\' of type \'FormGroup<{ [key: string]: AbstractCont

滚<任何，任何>； }>\'。 ……

当将鼠标悬停在有错误的行上时，我得到以下文本：

将控件添加到该组。在强类型组中，控件必须属于组的类型（可能作为可选键）。如果具有给定名称的控件已经存在，则不会用新控件替换它。如果要替换现有控件，请改用 FormGroup#setControl setControl 方法。此方法还更新控件的值和有效性。有解决方法吗？

请在这里找到问题：stackblitz demo

更新：

这是导致问题的完整代码：

 private test_formGroup() {
    const formGroup = new FormGroup({
      requestReference: new FormControl(\'\'),
      emailRecipient: new FormControl([Validators.required, Validators.email]),
      emailBodyMessage: new FormControl(\'\', Validators.required),
      requestDetails: new FormControl(\'\'),
    });

    if (true) {
      //real condition here
      formGroup.addControl(\'termsOfAgreement\', new FormControl(\'\'));
    }
  }

如果我在 FormGroup 生成时添加控件，它可以工作：

  const formGroup = new FormGroup({
      requestReference: new FormControl(\'\'),
      emailRecipient: new FormControl([Validators.required, Validators.email]),
      emailBodyMessage: new FormControl(\'\', Validators.required),
      requestDetails: new FormControl(\'\'),
      termsOfAgreement: new FormControl(\'\')
    });

    if (true) {
      //real condition here
      formGroup.addControl(\'termsOfAgreement\', new FormControl(\'\'));
    }

但是当你有复杂的逻辑并且你从一开始就不知道所有需要添加的控件时会发生什么？！如果您需要在创建 FormGroup 时专门添加它，“addControl”有什么好处？！

你可以在 stackblitz 或 github 上分享代码吗？
添加了 stacblitz 演示，需要等待服务器启动会报错
在 Angular 14 中，FormGroups 现在是 Typed-forms

标签： angular

【解决方案1】：

你不能像那样直接添加fromControl，你需要使用formBuilder and formGroup。

方法一：

 addControl(): void {
      this.formGroup = this.fb.group({
         ...this.formGroup.controls,   // <-- push to the existing formGroup controls
         agreement: [''],
      });
    }

方法二：

addControl(): void {
    this.formGroup.addControl('agreement', this.fb.control(''));
}

我也在 stackblitz 中修复了你的代码：

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

@Component({
  standalone: true,
  selector: 'app-name',
  template: `
    <ng-content></ng-content>, {{ name }}.
  `,
  styles: [``],
})
export class NameComponent {
  formgroup: FormGroup;
  constructor(private fb: FormBuilder) {}
  @Input() name = '';

  private test_formGroup() {
    this.formgroup = new FormGroup({
      requestReference: new FormControl(''),
      emailRecipient: new FormControl([Validators.required, Validators.email]),
      emailBodyMessage: new FormControl('', Validators.required),
      requestDetails: new FormControl(''),
    });
    this.fb.group(this.formgroup);
    if (true) {
      //real condition here
      this.formgroup.addControl('termsOfAgreement', this.fb.control(''));
    }
  }
}

你没有更多的错误：

【讨论】：

感谢您对此进行调查，请查看 stackblitz 示例。似乎您需要在定义表单组时添加所有控件，您无法动态添加新控件
我已经更新了我的答案，检查一下

【解决方案2】：

我对您的代码进行了一些更改并使用FormBuilder 构建了表单如果这可以解决您的问题，请查看并接受答案。

https://stackblitz.com/edit/angular-v14-playground-zsq82f?file=src%2Fname.component.ts

【讨论】：

我不能接受 2 个答案，但是是的，FormBuilder 方法有效！谢谢你！
没问题，伙计，无论哪种方法都可以帮助您，并且对您更有利，请继续使用该方法，并感谢您的支持:)
感谢您的帮助，非常感谢

【解决方案3】：

正如Eliseo 的评论中提到的，angular 14 现在使用类型化的形式。您仍然可以通过使用 UntypedFormGroup 来使用没有类型的旧表单组，如下所示：

import { FormControl, UntypedFormGroup, Validators } from '@angular/forms';

private test_formGroup() {
    const formGroup = new UntypedFormGroup({
      requestReference: new FormControl(''),
      emailRecipient: new FormControl([Validators.required, Validators.email]),
      emailBodyMessage: new FormControl('', Validators.required),
      requestDetails: new FormControl(''),
    });

    if (true) {
      formGroup.addControl('termsOfAgreement', new FormControl(''));
    }
  }

使用UntypedFormGroup addControl 方法将像在角度 13 中一样工作

【讨论】：