验证 Angular 不可见控件的响应式表单

Question

我正在努力寻找以下问题的答案：我正在使用 Angular Reactive forms 并且就验证而言，我想像一些非常简单的东西：

this.fb.group({"tel": [null, Validators.required]})

问题是，如果连接到上述表单控件的相应UI元素不可见，则表单无效：

(errors: {required: true})

然而，更大的问题是上述行为对于所有的表单控件都是不一样的。对于其他一些，在它们不可见且不会使表单无效的情况下没有问题。 有什么东西可以区分行为吗？对我来说，上面的控件没有区别！！

Answer 1

如果你使用 ngIf 它不会从 formGroup 中排除 formControl。如果使用 {disabled:true} 则 formControl 将从表单组中排除，然后您可以使用 enable 方法根据您的要求启用它。

this.form = this.fb.group({
      "tel": [{disabled: true, value: null} , Validators.required],
      check : true
    })

Validation of Angular Reactive forms for invisible controls