Angular Reactive Form 禁用控件无效

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; 
}

更新了抱歉，我的错，在文档中我们可以看到状态可以是

• 有效的
• 无效的
• 待办的
• 禁用

当状态有效时，表单控件有效 - 因此如果状态被禁用，则有效为 false。我们需要使用无效的“反义词”

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