Form表單 - 禁用屬性[disabled] 不起效果

在HTML標籤中，如果含有formControlName這個屬性，同時設定[disabled]不會起到禁用的效果。還有[attr.disabled]不起效果，提出解決辦法之前，我們首先了解一下可以起到禁用效果的屬性或方法。

禁用屬性：

關於禁用頁面上某個按鈕或輸入框等，我們可以用到[disabled]、[attr.disabled]、[class.disabled]。

區別：

• [attr.disabled] 會在標籤中新增disabled 屬性
• [class.disabled] 會在標籤的class中新增一個disabled 的類
  

注意：

• disabled 屬性不能被用於div 標籤中，只能用於以下標籤：
  

  <button>    
  <fieldset>  
  <input> 
  <keygen>    
  <optgroup>  
  <option>    
  <select>    
  <textarea>

  Syntax that will not disable an element：

  <button>Not Disabled</button>
  <button [disabled]
   
  ="false">Not Disabled</button>

  Syntax that will disable an element：

  <button disabled></button>
  <button disabled="true"></button>
  <button disabled="false"></button>
  <button [attr.disabled]="true"></button>
  <button [attr.disabled]="false"></
   
  button>
  <button [disabled]="true"></button>

  注意：

  • disable 屬性不管它的值是false還是true，都會禁用這個標籤；
  • Angular 不會禁用這個標籤，對於[disabled]="variable"而variable是 false；

解決辦法：

• 可以使用：[attr.disabled]="isDisabled ? '' : null" （'' 表示禁用，null表示不禁用）；
• form 表單中，我們可以在formgroup 中，直接設定 id: new FormControl({value: '', disabled: true}, Validators.required)，或者
  

  this.myForm.controls['id'].disable();或 this.myForm.controls['id'].enable();

參考連結：

• typescript - Angular 2+ attr.disabled is not working for div when I try to iterate ngFor loop - Stack Overflow （超級有用，專案中就是這麼解決的:)）
• 反應表單 - 禁用屬性 -Java 學習之路 (javaroad.cn) ( 有用到專案中)

最後感謝各位大神的分享，才有今天的總結，有什麼不足的地方，望各位指正，感謝~