Angular Material 2 - обработка нескольких сообщений об ошибках проверки

Я создаю форму с помощью Angular Material 2. Я использую форму, управляемую шаблоном, и у меня есть ввод по электронной почте, в котором есть два валидатора (обязательный и адрес электронной почты). В документе для компонента ввода (https://material.angular.io/components/component/input) там только сказано:

«Если элемент ввода может иметь более одного состояния ошибки, потребитель должен выбрать, какие сообщения должны отображаться. Это можно сделать с помощью CSS, ngIf или ngSwitch».

примера нет и нигде не найду.

Это мой html:

...
<form (ngSubmit)="onSubmit(registrationForm)" #registrationForm="ngForm">
    ...

    <md-input-container floatPlaceholder="never">
      <input mdInput type="email" placeholder="Enter your email address" name="email" [(ngModel)]="email" required email>
      <md-error class="required">Email is required.</md-error>
      <md-error class="email">Invalid email.</md-error>
    </md-input-container>

    ...

В настоящее время оба сообщения отображаются постоянно. Даже если я введу неверный адрес электронной почты.

Любое из упомянутых решений (CSS, ngIf или ngSwitch) подойдет, но я бы предпочел CSS.


angular angular-material2
person jbojcic    schedule 30.04.2017    source источник

Ответы (2)


arrow_upward
7
arrow_downward

См. Пример ниже. Отличный способ получить рабочие примеры - просмотреть / выполнить поиск в репозитории Angular 2 Material GIT. Пример ниже взят из https://github.com/angular/material2/blob/master/src/demo-app/input/input-demo.html.

      <md-input-container>
        <input mdInput placeholder="email" [formControl]="emailFormControl">
        <md-error *ngIf="emailFormControl.hasError('required')">
          This field is required
        </md-error>
        <md-error *ngIf="emailFormControl.hasError('pattern')">
          Please enter a valid email address
        </md-error>
      </md-input-container>
person Dan    schedule 30.04.2017
comment
formControl нельзя использовать с формами, управляемыми шаблонами, но если я изменю [formControl] = emailFormControl на # emailFormControl = ngModel, похоже, он работает. Мне все еще нужно решить проблему одновременного отображения только одного сообщения - person jbojcic; 30.04.2017
comment
Отображение по одному теперь можно решить с помощью css: md-error: not (: first-of-type) {display: none; } - person jbojcic; 30.04.2017

arrow_upward
6
arrow_downward

Вот как я реализовал это в Angular 6 (ReactiveFormsModule)

HTML

<form [formGroup]="service.form" class="normal-form">
 <mat-grid-list cols="2" rowHeight="300px">
    <mat-grid-tile>
    <input type="hidden" formControlName="$key">
      <div class="controles-container">
          <mat-form-field>
            <input formControlName="mobile" matInput placeholder="Mobile*">
            <mat-error *ngIf="service.form.controls['mobile'].errors?.required">This field is mandatory.</mat-error>
            <mat-error *ngIf="service.form.controls['mobile'].errors?.minlength">Minimum 8 charactors needed.</mat-error>
        </mat-form-field>      
      </div>
    </mat-grid-tile>
</mat-grid-list>
</form>

Component.ts

export class MyComponent implements OnInit {

  constructor(public service :EmployeeService) { }

  ngOnInit() {
  }

  onClear() {
    this.service.form.reset();

  }
}

Сервис

export class EmployeeService {

  constructor() { }

  form :FormGroup = new FormGroup({
    $key :new FormControl(null),
    mobile:new FormControl('',[Validators.required,Validators.minLength(10)]),  
  });
}
person Niraj Sonawane    schedule 23.10.2018