坑系列 (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();

 

参考链接:

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

 

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

上一篇:第3章 系统总线


下一篇:Jmeter常用操作