Почему Angular привязывает данные "поздно"?

Question

У меня есть некоторые проблемы с данными и привязкой классов в Angular, и ни одна из кнопок отключения не работает.

checkNewChampName(value) {
    if (this.actualChampionships.indexOf(value) !== -1) {
      this.validNewChampName = false;
    } else {
      this.validNewChampName = true;
    }
  }

<form #userForm="ngForm">
  <div class="form-group">
    <label>Name</label>
    <input #name="ngModel" type="text" [class.is-invalid]="!validNewChampName" class="form-control" name="name" [(ngModel)]="newChampName" (keydown)="checkNewChampName(name.value)">
  </div>
<button [disabled]="userForm.form.invalid" class="btn btn-primary">Submit</button>
</form>

Так что я бы хотел ввод, который вызывает метод проверки для каждого нажатия клавиши. Эта проверка должна установить для переменной класса значение true или false, в зависимости от того, является элемент value массива или нет. И я хочу связать эту логическую переменную с классом «is-invalid» ввода. У меня 3 проблемы:

1. В начале мой ввод красный, и если я что-то напишу и снова удаляю в пустое поле, он снова не будет красным (не должно быть и в начале), так почему он при запуске красный?
2. Метод проверки почти работает, но он задерживает один символ. Поэтому, если в массиве есть «asdf», мой ввод остается синим, но при следующем нажатии клавиши он становится красным.
3. Почему кнопка не отключена, когда мой ввод красный?

Answer 1

1. Красный, потому что для переменной задано значение false, с которого вы начинаете, и вы сказали, чтобы она отображала ошибку всякий раз, когда она ложна. И ваша логика, чтобы установить его в true, не сработает, пока вы что-то не введете. Если вы хотите избежать этого, у вас есть несколько вариантов:

** Либо измените свою логику, чтобы она отображала ошибку только при касании ввода (например,

[class.is-invalid]="name.dirty && !validNewChampName"

** или вы можете просто установить для переменной значение true по умолчанию:

export class Whatever {
validChampName = true;
}

для # 2, вам нужно получить значение модели, поэтому попробуйте:

попытка (KeyDown) = "checkNewChampName (newChampName)"

Также рассмотрите возможность привязки к (ngModelChange) = "checkNewChampName ($ event)" . Таким образом, ваша логика будет работать не только при нажатии клавиши, но и при изменении значения.

Наконец, он не отключен, потому что он должен быть

userForm.invalid 

(без формы после нее)

Answer 2

Проблема в том, что событие keydown вызывается до обновления ngModel. Чтобы ответить на изменение ввода, обработайте ngModelChange:

<input ... [(ngModel)]="newChampName" (ngModelChange)="checkNewChampName($event)">

См. этот стек для демонстрации.

<Ч />

Кнопка не отключена, поскольку на элементе ввода нет действительной проверки формы (например, с атрибутом required или pattern). Проверка, которую вы выполняете, находится только в логике вашего компонента, но на самом деле она не делает форму недействительной. Вы можете определить пользовательский валидатор для этого поля, как описано в этой статье . Альтернативой является переключение на модель Реактивные формы , в которой настраиваемая проверка проще в реализации. В вашем случае простое решение состоит в том, чтобы отключить кнопку, когда ваша текущая проверка не проходит:

<button [disabled]="!validNewChampName" class="btn btn-primary">