坑系列 (Angular 2+ ) -> 设置[disabled]不好用的解决办法

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)   ( 有用到项目中) 

    最后感谢各位大神的分享，才有今天的总结，有什么不足的地方，望各位指正，感谢~