角度 6 - ng 脏和 ng 无效无法按预期工作

Question

我正在尝试一些表单验证，并看到应用于表单控件的类的奇怪行为。

当我将输入值从"Rob"更改为"Ro"时，ng-dirty没有应用，但是当我将值进一步更改为"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

我不得不承认我不完全理解这背后的原因，但是您在尝试显示的userName.className上收到"ExpressionChangedAfterItWasChecked"错误。它似乎首先检查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', '[e-mail]', 5556665566, 'Angular', 'morning', true);
constructor(private ref: ChangeDetectorRef) {}
ngAfterViewChecked() {
this.ref.detectChanges();
}
}

Answer 3

发生的情况是，您总是落后一个更改检测步骤(使用内插类名(，因为您正在更改模型，而模型又会更改输入字段的值，然后您将该输入字段值(通过模板变量(复制到其他地方。

试试这个堆栈闪电战： https://stackblitz.com/edit/angular-form-classes-q97pah?file=src%2Fapp%2Fapp.component.ts

在这里，您侦听ngModelChange一旦发生，在下一个刻度(setTimeout(中显示类名值。