javascript - 将新的 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但无效？即使这有充分的理由，我们不应该假设如果我们动态生成一个带有验证器的新 FormGroup，它应该在创建或 push 时被认为是有效的>?有没有解决的办法？我不想让我的用户点击一个按钮来生成一组新的字段来填写他们自己没有对这些字段做任何事情时已经标记为无效的字段。这是一个错误吗？我不觉得我的实现不正确，因为我已经遵循了 Angular Material 文档。在将新的 foo 插入 FormArray 之后，我尝试手动设置 Validators.required 但这会产生相同的结果。

有任何意见和/或提示吗？

Answer 1

你的问题在这里就是答案。

在初始状态你的this.form是有效的

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

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

如果你想在推送时有效，尝试添加值或删除所需的验证器

引用:

FormBuilder 像这样用 formControl 创建组

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