Angular 2 - неожиданное поведение на кнопке отключено

Question

В моем приложении кнопка изначально отключена. Если поле ввода заполнено, кнопка включена, но происходит странное поведение. Если этот параметр отключен, значок запрещен и его нельзя щелкнуть (это, очевидно, правильно). При значении чего-либо в поле ввода кнопка меняет класс и включается, но значок не меняется, хотя можно нажать кнопку (это странно). Если щелкнуть поле ввода, значок изменится, и вместо запрещенного сигнала появится значок руки. Ожидаемое поведение - иметь значок руки на цифре в поле ввода. Это мой код:

<button (click)='onClick()' [disabled]="isDisabled" [class]="checkValid()" type="submit">Search</button>

checkValid() {
   if (this.myInput != "") {
            this.isDisabled= false;
            return "btn btn-primary";
        } else {
            this.isDisabled= true;
            return "btn btn-primary disabled";
        }
    }

Любое предложение?

Answer 1

Вот решение для вашего приложения:

Лучше использовать [ngClass] вместо просто [class]. И старайтесь избегать возвращаемого состояния в HTML, потому что ваш метод будет работать в цикле.

Я добавил оператор ngClass и добавил (keyup)='checkValid()' в поле ввода.

@Component({
  selector: 'my-app',
  template: `
    <input type="text" [(ngModel)]="myInput" (keyup)='checkValid()'>
    <button (click)='onClick()' [disabled]="isDisabled" class='btn btn-primary' [ngClass]="{'disabled': isDisabled}" type="submit">Search</button>
  `,
})
export class App {
  isDisabled: boolean = true;
  myInput: string = '';

  constructor() {
  }

  checkValid() {
   if (this.myInput != "") this.isDisabled= false;
   else this.isDisabled= true;
  }

  onClick(){

  }
}

Planker:

https://plnkr.co/edit/nWQiCy2ZVuZTPSVCBr4y?p=preview