Угловая проверка не синхронизирована с проверкой HTML

Question

У меня проблема с проверкой углов.

У меня есть вложенная группа ModelGorm в parentForm. В parentForm есть максимальное значение, используемое во вложенной modelGroup в качестве директивного ввода для максимального значения поля zip.

Пример в Stackblitz: https://stackblitz.com/edit/91k00-nested-from-validity

Ожидаемый результат: После изменения значения max директива max оценивает поле zip и делает поле недействительным, затем modelGroup и parentForm также становятся недействительными.

Фактический результат: После того, как вы измените максимальное значение, директива max оценивает поле zip и делает недействительным поле , но modelGroup и parentForm все еще действительны .

Не могли бы вы объяснить мне это поведение и помочь мне исправить это? Спасибо

Answer 1

Вы не дадите Angular передохнуть. Вы изменяете maxValue и сразу делаете обновление. Используйте SetTimeout, чтобы сделать новый фильм

  updateValidity() {
    setTimeout(()=>{
      this.parentForm.controls.address.controls["zip"].updateValueAndValidity();
    })
  }

Кроме того, вам нужно вызвать функцию updateValidity при изменении значения;

setTo899 () {
    this.maxZipValue = 899;
    this.updateValidity()
  }

И

<input type="number" name="maxZipValue" 
     [ngModel]="maxZipValue" 
     (ngModelChange)="maxZipValue=$event;updateValidity()">

см. ваш разветвленный стек

ПРИМЕЧАНИЕ: я не уверен, но использование ReactiveForms может работать лучше, и возможно удалить этот обходной путь