Angular Reactive Form Disabled Control 无效

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我们可以看到状态可以是

• 有效
• 无效
• 待处理
• 已禁用

当状态有效时，表单控件有效 - 所以如果状态被禁用，则有效为假。我们需要使用无效的“相反”

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