Angular 6 - ng-dirty 和 ng-invalid 未按预期工作

Question

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

ng-dirty当我将输入值从“Rob”更改为“Ro”时，不会应用它，但当我将值进一步更改为“R”时，它会应用。

ng-invalid当我清除表单字段并且存在必需属性时，不会应用。如果我模糊了，该类就会被应用。

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

我做错了什么？请告诉我，谢谢。

Answer 1

当模板引用变量 username 在 DOM 中的定义之后使用时，它不会出现错误。根据我的测试，它可以在 form 标签内部或外部使用，只要它位于 input 元素声明之后即可。

参见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