Angular 反应式表单禁用控件无效

Question

我认为 disabled 控件不会得到验证。但我正面临这个问题。

我使用官方Angular反应式表格样本进行了转载：

https://stackblitz.com/edit/angular-hyvj24?file=src/app/dynamic-form-question.component.ts

如果您在电子邮件字段中输入内容并聚焦，这将触发我正在执行的 change 事件：

this.form.controls['firstName'].disable();

虽然名字不是必填字段，但它已通过验证并且我们看到一条红色消息。 如果没有这行代码，firstName 可以为空，我们仍然可以保存。

为什么会这样？

Answer 1

禁用控件后，控件是否有效，是形式控件无效但有效。例如

form=new FormGroup({
    control1:new FormControl({value:null,disabled:true},Validators.required),
    control2:new FormControl()
  })

{{form.valid}} //true
{{form.get('control1').valid}}  //false

在您的特定情况下，您可以更改函数 isValid，例如：

get isValid() {  
   return this.form.controls[this.question.key].disabled || 
          !this.form.controls[this.question.key].invalid; 
}

已更新对不起，我的错，在the docs我们可以看到状态可以

• 有效
• 无效
• 待定
• 已禁用

表单控件在状态有效时有效 - 所以如果状态被禁用，则有效为假。我们需要使用 invalid

的“反义词”

get isValid() {  
   return !this.form.controls[this.question.key].invalid; 
}