Question

我想知道，如果类型脚本：

，如果在ionic2应用程序中任何存在的输入为空，如何正确地禁用按钮

  name: string = null;

这种方式在.html中对一个输入值有用，可以启用或禁用按钮：

<button ion-button (click)="add();" [disabled]="name === null" >Save</button>

从：

<ion-item>
  <ion-label>Name</ion-label>
  <ion-input type="text" [(ngModel)]="name"></ion-input>
</ion-item>

但如果我有几个输入：

  name: string = null;
  surname: string = null;
  username: string = null;

填写一个输入，按钮变为启用状态：

    <ion-item>
      <ion-label>Name</ion-label>
      <ion-input type="text" [(ngModel)]="name"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Surname</ion-label>
      <ion-input type="text" [(ngModel)]="surname"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Username</ion-label>
      <ion-input type="text" [(ngModel)]="username"></ion-input>
    </ion-item>

所以不正确：

 <button ion-button (click)="add();" [disabled]="name === null" [disabled]="surname === null" [disabled]="username === null" >Save</button>

Answer 1

这很简单

<button [disabled]="!name || !surname || !username">Save</button>

如果你有更复杂的逻辑，你可以使用属性来保持模板清洁。

get canSave() {
  return this.name && this.surname && this.username;
}

并像这样引用它

<button [disabled]="!canSave">Save</button>

请注意，我强烈建议您不要将属性初始化为null。一个更好的方法就是不提供初始值，并使用?表示它们可能没有值来有意义地注释它们

name?: string;
surname?: string;
username?: string;

如果多个输入中的任何一个空

1 个答案: