ngModel errors.pattern属性始终是在角模板真

Question

基本上，我想检查，如果用户输入3个或更多字符Name领域内。如果是这样，没有错误显示。否则，将显示一条错误消息，通知他/她必须输入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>

Answer 1

如果你打开使用活性形式的方法，这里是你可以做什么：

只需创建与FormControl和required验证你的组件类一个minlength。然后只需将其绑定到视图。

这是它会是什么样子的代码：

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添加到您的imports的@NgModule阵列。

---

以下是为您的参考一Working Sample StackBlitz。