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) ( 有用到項目中)
最后感謝各位大神的分享，才有今天的總結，有什么不足的地方，望各位指正，感謝~