Angular Reactive Form Disabled 控件無效

Question

我認為disabled的控件不會得到驗證。 但我正面臨這個問題。

我使用官方的 Angular 響應式表單示例進行了復制：

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

如果您在電子郵件字段中輸入內容並聚焦，這將觸發我正在執行的change事件：

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

雖然 firstname 不是必填字段，但它得到驗證並且我們看到一條紅色消息。 如果沒有這行代碼， 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

在您的特定情況下，您可以將 function isValid 更改為以下內容：

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

更新對不起，我的錯，在文檔中我們可以看到狀態可以是

• 有效的
• 無效的
• 待辦的
• 已禁用

當狀態有效時，表單控件有效 - 所以如果狀態被禁用，則有效為假。 我們需要使用無效的“相反”

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

Answer 2

您是正確的， .disable()不會得到驗證。 來自 Angular 官方文檔：

禁用控件。 這意味着該控件免於驗證檢查並從任何父級的聚合值中排除。 它的狀態是禁用的。 如果控件有子項，則所有子項也將被禁用。

錯的是支票。 在 stackbiz 中是：

得到 isValid() { 返回 this.form.controls[this.question.key].valid; }

而它應該是：

  get isValid() {
    return this.form.valid;
  }