Как отключить кнопку в зависимости от длины списка

Question

Я хочу, чтобы пользователь мог выбрать только один тег.Таким образом, кнопка должна быть отключена после того, как пользователь поместил один тег в список.Поэтому я решил, что если длина list.length больше 0, кнопка должна быть отключена.Но почему-то это не работает в моем подходе.

page.html

 <ion-item>
      <ion-input mode="md" formControlName="category" clearInput="true" placeholder="Tag" name="tagValue"></ion-input>
      <ion-button [disabled]="!categoryForm.valid" [disabled]="tagList?.length > 1"  item-right type="submit" icon-only>
      <ion-icon name="checkmark"></ion-icon>
    </ion-button>
    </ion-item>

page.ts

  public tagInput: string = '';
  public tagList: any[] = [];

constructor() {}
...
addTag() { // properly access and reset reactive form values
  const tagCtrl = this.categoryForm.get('category');
  if (tagCtrl.value) {
    this.tagList.push(tagCtrl.value);
    this.tagInput = ''; // in order to have an empty input
  }
}

Answer 1

Вы дважды используете атрибут disable:

<ion-item>
      <ion-input mode="md" formControlName="category" clearInput="true" placeholder="Tag" name="tagValue"></ion-input>
      <ion-button [disabled]="!categoryForm.valid || tagList?.length > 0"  item-right type="submit" icon-only>
      <ion-icon name="checkmark"></ion-icon>
    </ion-button>
    </ion-item>