错误描述
ng-zorro是遵循Ant Design设计规范的Angular UI组件库,前端开发中angular + ng-zorro
结合使用可以事半功倍。
今天在开发过程中发现ng-zorro的一个坑,当我给input输入框设置disabled属性时,无论disabled的值为true或者false都没有效果
。
经过多番调查发现,在ng-zorro中使用disabled属性时,disabled属性时灵时不灵,具体有以下几种情况:
1、disabled属性与ngModel同时使用时,disabled效果正常
<input type="text" nz-input placeholder="请输入" [(ngModel)]="searchValue" [disabled]="true" />
2、disabled单独使用时,效果正常
<input type="text" nz-input placeholder="请输入" [disabled]="true" />
3、disabled属性与fromControlName同时使用时,disabled属性无效
<input nz-input formControlName="count" placeholder="请输入数量" [disabled]="true" />
ngModel和formGroup不可以同时在一个input上使用,所以在fromControlName这种情况下,我们无法在input节点上直接使用disabled属性设置输入框是否readonly。
错误原因
经过调查发现,angular 更希望开发者通过给 fromControl 实例设置 disabled 来禁用它,而不是在它上面绑定[disabled]属性!
而且这时候其实 angular 是会给我们报一个警告信息的,只不过大部分开发者日常开发中不会关注waring。
解决方法1
disabled属性失效的情况是在angular中使用了响应式表单FormGroup时出现的,使用FormGroup时,我们必须在代码中对响应式表单进行初始化,我们可以在这时对input设置disabled。
<form nz-form [formGroup]="from" (ngSubmit)="submitForm()"><nz-form-item><nz-form-control nzErrorTip="Please input your username!"><nz-input-group nzPrefixIcon="user"><input formControlName="userName" nz-input placeholder="Username" /></nz-input-group></nz-form-control></nz-form-item></form>
from: FormGroup;constructor( private fb: FormBuilder) {}this.validateForm= this.fb.group({userName: [{value:null,disabled: true}, [Validators.required]],});
解决方法2
这种方法和方法1相识,通过controls对相应的表单项进行操作:
this.from.controls.userName.disable(); // 设置readonlythis.from.controls.userName.enable(); //取消readonly
解决方法3
除了angular推荐的解决方法之外,我们还可以使用Angular中的renderer2指令
进行DOM操作。
<input nz-input formControlName="count" placeholder="请输入数量" id = "inp"/>
constructor(private renderer2: Renderer2) {}// 下面两种方式都可以,区别在于获取DOM对象的方式this.renderer2.setAttribute(document.getElementById('inp'), "disabled", "true");this.renderer2.setAttribute(this.renderer2.selectRootElement("#inp"), "disabled", "true");//移除disabled属性this.renderer2.removeAttribute(this.renderer2.selectRootElement("#inp"), "disabled");
Render2 是angular中用于操作DOM的,Angular做了封装,屏蔽底层差异,通用性更强。除了setAttribute\removeAttribute两个方法之外还有一系列操作DOM的方法,具体可以登录renderer2官方文档查询。