ng-zorro+angular中 input输入框设置disabled属性无效的解决方法

admin管理员组

文章数量:1640603

错误描述

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(); // 设置readonly
this.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官方文档查询。

本文标签： 解决方法输入框属性zorroNG