Question

基本上，我正在尝试检查用户是否在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>

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的{{1}}数组中。

这是您推荐的Working Sample StackBlitz。

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

1 个答案: