将新的 FormGroup 推入 FormArray 将动态 FormGroup 标记为无效

Question

我不确定这是否是一个错误，几乎 90% 肯定不是，但我想知道发生这种情况背后的逻辑。

我有一个组件，假设我在组件初始化时初始化一个 FormGroup。

export class FooComponent implements OnInit {
  form!: FormGroup;
  foos!: FormArray;
  constructor(
    private fb: FormBuilder
  ) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      foos: this.fb.array([]),
    });
  }

  createFoo(): FormGroup {
    return this.fb.group({
      name: ['', Validators.required],
      details: ['', Validators.required]
    });
  }

  addFoo(): void {
    this.foos = this.form.get('foos') as FormArray;
    this.foos.push(this.createFoo());
  }
}

假设单击按钮时调用 addFoo() 函数（我当前的应用程序就是这样）。为什么新推的FormGroup标记为pristine，但标记为invalid？即使这有充分的理由，难道不应该假设如果我们使用验证器动态生成一个新的 FormGroup，它应该在创建或 push 时被认为是有效的吗？有没有解决的办法？我不想让我的用户点击一个按钮来生成一组新的字段来填写他们自己没有对这些字段做任何事情时已经标记为无效的字段。这是一个错误吗？我不觉得我的实现不正确，因为我已经遵循了 Angular Material 文档。在将新 foo 推入 FormArray 后，我尝试手动设置 Validators.required 但这会产生相同的结果。

有什么意见and/or提示吗？

Answer 1

你的问题这里有答案。

在初始状态下，您的 this.form 有效

然后 createFoo() 创建一个 formGroup，由于所需的验证器提供了空值，因此无效。

当您尝试将无效的 formGroup 推送到有效的 formGroup 数组时，this.form 会变得无效。

如果您希望在推送时有效，请尝试添加值或删除所需的验证器

参考：

FormBuilder 像这样用 formControl 创建组

new FormControl(value: any, validator: Validators);

Answer 2

我有一个非常相似的情况，每当我向我的 formArray 添加一个新的 formGroup 时，它的验证就会被触发，即使它们是原始的。事实证明，如果您使用按钮动态添加 formGroups，它将默认操作为提交事件，如果您未指定按钮类型，则会触发对运行的验证。

添加 type="button" 解决了问题

REF：.

将新的 FormGroup 推入 FormArray 将动态 FormGroup 标记为无效

Pushing new FormGroup into FormArray marks dynamic FormGroup as invalid

javascript

angular-material

angular

angular6

angular-material-6