填坑：ng-zorro angular disabled属性

最新推荐文章于 2023-02-18 08:03:58 发布

Java.net

最新推荐文章于 2023-02-18 08:03:58 发布

阅读量5.9k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_37627370/article/details/89565181

本文介绍了在Angular中如何处理ng-zorro组件的disabled属性。内容包括三种方法：通过DOM元素对象直接操作属性、使用Renderer2设置属性以及利用ng-zorro的nzDisabled指令。特别指出，在使用nz-input时，[disabled]绑定需配合ngModel才能生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先disabled这个属性比较特殊，只要在html页面中的标签加入disabled属性，那么标签对象的html属性则为disabled = "true"，与此同时，标签对象的DOM节点的disabled 属性被初始化为disabled = "true"

杂记:Angular-DOM属性绑定和HTML属性绑定

如果想动态改变input状态，只能想办法添加删除disabled属性

<input disabled/> 
<input />

方法1

在angular里可以如下方式获得DOM元素对象进行相关属性的操作：

<input id = "zzz" disabled/>

  constructor(
    private renderer2: Renderer2) {
  }

  disable() {
    this.renderer2.setAttribute(this.renderer2.selectRootElement("#zzz"), "disabled", "true");
  }
  enable() {
    this.renderer2.removeAttribute(this.renderer2.selectRootElement("#zzz"), "disabled");
  }

关于在angular使用DIM元素进行操作的方式：
https://blog.youkuaiyun.com/qq_28004379/article/details/80801378
https://blog.youkuaiyun.com/idomyway/article/details/83656366

Renderer2
https://www.angular.cn/api/core/Renderer2#setAttribute

方法2

在angular+ng-zorrro中可以使用ng-zorro提供的指令nzDisabled和disabled，具体见ng-zorro提供的官网；
不过这里有个注意点：
针对nz-input，想要[disabled]能正常绑定，需要配合[(ngModel)]使用，若单独使用或结合formControlName，无效！

<input nz-input placeholder="Basic usage" [(ngModel)]="value" [disabled]="true" />

所以这两种情况可以使用方法1

方法3

Angular响应式表单disable和enable两个函数可以禁用和启用表单元素