Свойство ngModel errors.pattern всегда имеет значение true в шаблоне Angular - PullRequest
Новая
       6

Свойство ngModel errors.pattern всегда имеет значение true в шаблоне Angular

0 голосов
/ 09 февраля 2019

В основном я пытаюсь проверить, вводит ли пользователь 3 или более символов в поле Name.Если это так, ошибка не должна отображаться.В противном случае отображается сообщение об ошибке, информирующее пользователя о том, что он / она должен ввести 3 или более символов для имени.Однако даже когда я набираю более 3 символов, я получаю сообщение об ошибке.

Вот код моего шаблона для Name 

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

1 Ответ

0 голосов
/ 09 февраля 2019

Если вы открыты для использования подхода Reactive Forms, вот что вы можете сделать:

Просто создайте 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.

Вот Рабочий примерStackBlitz для вашей ссылки.

...