如何通过Angular响应式表单实现Ionic中ion-input的禁用与启用？

我之前也碰到过一模一样的问题！你遇到的情况是因为Ionic的ion-input是封装后的组件，和原生HTML input不同，它不会自动同步Angular表单控件的disabled状态变化，所以只调用disable()或enable()方法，UI上不会有任何变化。

问题分析 #

你的代码逻辑在原生input上能正常工作，是因为原生input会自动监听表单控件的状态，但ion-input作为Ionic封装的组件，需要我们手动把它的禁用状态和表单控件的状态绑定起来。另外，你代码里的updateValueAndValidity()其实是多余的，调用disable()和enable()本身就会触发控件的状态更新。

修正后的代码 #

TypeScript 部分

Disable(){ 
  this.name.disable(); 
}

Enable(){ 
  this.name.enable(); 
}

HTML 部分

<ion-item> 
  <ion-input type="text" [formControl]="name" [disabled]="name.disabled"></ion-input> 
</ion-item>
<button ion-button (click)="Disable()">Disable</button>
<button ion-button (click)="Enable()">Enable</button>

原理说明 #

我们通过[disabled]="name.disabled"把ion-input的禁用属性和表单控件name的disabled状态做了绑定，当你点击按钮调用disable()或enable()时，表单控件的状态变化会立即同步到ion-input上，这样就能正常实现禁用和启用的效果了。

内容的提问来源于stack exchange，提问作者abhilash reddy