Отключить кнопку, когда вход пуст в Angular 2

Я хочу проверить, пуст ли вход.

  • Если не пуст, включите кнопку отправки.
  • Если пусто, отключите отправку Кнопка.

Я пробовал (oninput) и (onchange), но они не запускаются.

<input type="password" [(ngModel)]="myPassword" (oninput)="checkPasswordEmpty()"/>

checkPasswordEmpty() {
    console.log("checkPasswordEmpty runs");
    if (this.myPassword) {
        // enable the button
    }
}

Ответы

Ответ 1

В этом случае я бы использовал инструменты проверки формы. Я бы добавил "требуемую" проверку на вашем входе и использовал глобальное состояние вашей формы, чтобы отключить/включить вашу кнопку.

При использовании подхода, основанного на шаблонах, нет кода для добавления в ваш компонент, только материал в его шаблоне...

Ниже приведен пример:

<form #formCtrl="ngForm">
  <input ngControl="passwordCtrl" required>
  <button [disabled]="!formCtrl.form.valid">Some button</button>
</form>

Ответ 2

Чтобы связывать функции с событиями, вам не нужно префикс их с помощью on. Просто разместите событие.

Например, если вы хотите обработать демонстрацию keydown (plunker):

<input type="password" [(ngModel)]="myPassword" (keydown)="checkPasswordEmpty($event)"/>

Но в вашем конкретном случае, поскольку вы уже используете ngModel, вам лучше использовать (ngModelChange):

<input type="password" [(ngModel)]="myPassword" (ngModelChange)="checkPasswordEmpty()"/>

Потому что он подберет изменения, когда пользователь вставляет (через CTRL+V или mouse right click menu -> Paste) пароль вместо его ввода.

Смотрите демонстрацию plunker для использования (ngModelChange) здесь.