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文档。在将新的Validators.required推入foo之后，我尝试手动设置FormArray，但这会产生相同的结果。

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

Answer 1

对您来说，这是一个答案。

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

然后createFoo（）创建一个formGroup，由于必需的验证程序提供了空值，该formGroup无效。

当您尝试将无效的this.form推入有效的formGroup数组时，new FormControl(value: any, validator: Validators);会变得无效。

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

对于REF：

FormBuilder使用这样的formControl创建组

{{1}}

Answer 2

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

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

参考：https://stackoverflow.com/questions/58514431/reactive-form-array-avoid-validation-error-when-push-new-elements#:~:text=Reactive%20Form%20Array%20%2D%20Avoid%20Validation%20Error%20when%20push%20new%20elements,-angular%20angular%2Dreactive&text=When%20I%20push%20new%20elements,I%20create%20the%20new%20FormGroup%20。

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

2 个答案: