ngModel errors.pattern 属性在 Angular 模板中始终为 true答案

【问题标题】：ngModel errors.pattern property is always true in Angular templatengModel errors.pattern 属性在 Angular 模板中始终为 true
【发布时间】：2019-07-03 15:30:45
【问题描述】：

基本上，我正在尝试检查用户是否在 Name 字段中输入了 3 个或更多字符。如果是这样，则不会显示错误。否则，将显示一条错误消息，通知用户她/他必须输入 3 个或更多字符作为名称。但是，即使我输入超过 3 个字符，我仍然会收到错误消息。

这是我的模板的名称代码

 <label for="studentName">Name</label>
  <input
    id="studentName"
    name="thename"
    type="text"
    [(ngModel)]="firstStudent.name"
    #varFirst="ngModel"
    required
    pattern=".{3,}"
  />
  <div *ngIf="varFirst.touched && varFirst.errors.required">
    Please enter your name
  </div>

  <div
    *ngIf="
      varFirst.touched && varFirst.errors.pattern && !varFirst.errors.required
    "
  >
    Name should be more than 3 characters.
  </div>

【问题讨论】：

如果你会使用安全导航算子varFirst.errors?.required呢？
@yurzui 我在控制台中收到以下错误TypeError: Cannot read property 'required' of null
你在三个地方添加了吗？ varFirst.errors?.required 和 varFirst.touched && varFirst.errors?.pattern && !varFirst.errors?.required
您需要这个的原因是因为在某些情况下您的控件没有任何错误并且varFirst.errors === null 反映了这一点。当 Angular 检查您的模板时，它会执行您的所有绑定，并且您会遇到运行时错误
您愿意使用响应式表单方法吗？

标签： angular html attributes angular-ngmodel

【解决方案1】：

如果您愿意使用响应式表单方法，您可以执行以下操作：

只需使用required 和minlength 验证器在您的组件类上创建一个FormControl。然后简单地将其绑定到视图。

这就是它在代码中的样子：

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  varFirst: FormControl;
  firstStudent = {
    name: 'John Doe'
  };

  ngOnInit() {
    this.varFirst = new FormControl(this.firstStudent.name, [Validators.required, Validators.minLength(3)]);
  }

}

在模板中：

<label for="studentName">Name</label>
<input type="text" [formControl]="varFirst"/>

<div *ngIf="varFirst.touched && varFirst.errors">
  <p *ngIf="varFirst.errors.required">Please enter your name</p>
  <p *ngIf="varFirst.errors.minlength">Name should be more than 3 characters.</p>
</div>

PS：别忘了将ReactiveFormsModule 添加到@NgModule 的imports 数组中。

这里有一个Working Sample StackBlitz 供您参考。

【讨论】：