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) ( 有用到项目中)
最后感谢各位大神的分享,才有今天的总结,有什么不足的地方,望各位指正,感谢~