如果多个输入中的任何一个为空，则禁用按钮

Question

我想知道，如果 Type Script:

  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;

如果多个输入中的任何一个为空，则禁用按钮

Disable button if any of several inputs empty

html

typescript

ionic2