Question

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

当我从＆＃39; Rob＆＃39;更改输入值时，

ng-dirty未应用。 to＆＃39; Ro＆＃39;但是当我将值进一步更改为“＆＃39; R＆＃39;。

时，它会被应用当我清除表单字段并且存在必需属性时，

ng-invalid不会被应用。如果我模糊了，那么这个类就会被应用。

链接到代码 - https://stackblitz.com/edit/angular-form-classes

我做错了什么？请让我知道谢谢。

Answer 1

当模板引用变量username在DOM中定义之后时，它没有错误。根据我的测试，它可以在form标记的内部或外部使用，只要它在输入元素声明之后。

请参阅this stackblitz了解演示。

<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', 'rob@test.com', 5556665566, 'Angular', 'morning', true);

  constructor(private ref: ChangeDetectorRef) {}

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

Answer 3

发生的事情是你总是在后面进行一个变更检测步骤（使用插值类名），因为你正在改变模型，而模型又会改变输入字段的值，然后你复制那个输入字段值（通过模板变量）到其他地方。

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

在这里你听ngModelChange，一旦它发生，在下一个刻度线（setTimeout）中你显示了类名值。

角度6 - ng-dirty和ng-invalid不能按预期工作

3 个答案: