각도 재질 2 - 여러 유효성 검사 오류 메시지 처리

Question

각도 재질 2로 양식을 만듭니다. 템플릿 기반 양식을 사용하고 있고 2 개의 유효성 검사기 (필수 및 전자 메일)가있는 전자 메일 입력이 있습니다. 입력 구성 요소 (https://material.angular.io/components/component/input)에 대한 문서에서 다음과 같이 말합니다 :

"입력 요소에 둘 이상의 오류 상태가있을 수있는 경우 소비자가 표시 할 메시지를 토글해야합니다. CSS, ngIf 또는 ngSwitch. "

예제가 없으며 어디서나 찾을 수 없습니다. 현재 두 메시지가 항상 표시됩니다

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

    ... 

:

이

내 HTML입니다. 무효 이메일을 입력해도

언급 된 솔루션 (CSS, ngIf 또는 ngSwitch)은 괜찮지 만 CSS를 선호합니다.

Answer 1

아래 예를 참조하십시오. 작업 예제를 얻는 가장 좋은 방법은 Angular 2 Material GIT repo를 검토/검색하는 것입니다. 예 아래의 템플릿 중심 형태와 함께 사용할 수 없습니다 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>