Угловой 6 - нг-грязный и нг-недействительный не работает должным образом

Question

Я пробую некоторую проверку формы и вижу странное поведение классов, которые применяются к элементу управления формы.

ng-dirty не применяется, когда я изменяю входное значение с 'Rob' на 'Ro ', но он применяется, когда я изменяю значение далее на' R '.

ng-invalid не применяется, когда я очищаю поле формы и обязательный атрибут присутствует.Если я размываю, класс применяется.

Ссылка на код - https://stackblitz.com/edit/angular-form-classes

Что я делаю не так?Пожалуйста, дайте мне знать, спасибо.

Answer 1

Работает без ошибок, когда используется шаблонная переменная username после ее определения в DOM.Согласно моим тестам, его можно использовать внутри или снаружи тега form, если он указан после объявления элемента ввода.

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

<form #userForm="ngForm" ngForm>
  <div class="form-group">
    <label>Name</label>
    <input type="text" #userName required class="form-control" name="name" [(ngModel)]="userModel.name">
  </div>
</form>
{{userName.className}}  <<-- Works when positioned after userName definition in the DOM

Answer 2

происходит то, что вы всегда на шаг впереди обнаружения изменений (с интерполяцией имен классов), потому что вы изменяете модель, которая в свою очередь меняет значение поля ввода, а затем копируете значение этого поля ввода (через шаблонпеременная) в другое место.

попробуйте этот стек: https://stackblitz.com/edit/angular-form-classes-q97pah?file=src%2Fapp%2Fapp.component.ts

здесь вы прослушиваете ngModelChange и как только это произойдет, в следующем тике (setTimeout) вы увидите значения имени класса.

Answer 3

Я должен признать, что не до конца понимаю причины, стоящие за этим, но вы получаете ошибки «ExpressionChangedAfterItWasChecked» на userName.className, который вы пытаетесь отобразить.Кажется, сначала проверяется userName.className, а затем выполняется проверка состояния формы на основе событий, которые его обновляют, поэтому он всегда на шаг позади.Вы можете синхронизировать эти значения, выполнив дополнительный цикл проверки обнаружения изменений.

Внедрите ChangeDetectorRef в ваш компонент и запустите detectChanges() после проверки представления.

import { Component, AfterViewChecked, ChangeDetectorRef } from '@angular/core';
import { User } from './user';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewChecked {
  name = 'Angular 6';
  topics = ['Angular', 'React', 'Vue'];
  userModel = new User('Rob', 'rob@test.com', 5556665566, 'Angular', 'morning', true);

  constructor(private ref: ChangeDetectorRef) {}

  ngAfterViewChecked() {
    this.ref.detectChanges();
  }
}