如何获得所需的错误和电子邮件模式分别角4？

Question

我正在实施角度4反应形式验证。我有形式的这种布局

这里是我的app.component.ts代码

import { Component } from '@angular/core'; 
import { FormBuilder, FormGroup, Validators} from '@angular/forms'; 

@Component({ 
selector: 'app-root', 
templateUrl: './app.component.html', 
styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 

rForm  : FormGroup; 
post  : any; 
name  : string =''; 
userEmail : string = ''; 
desc  : string =''; 
titleAlert: string ='This is required'; 
emailError: string ="Enter valid email"; 

constructor(private fb : FormBuilder){ 
    this.rForm = fb.group({ 
    'name' : [null, Validators.required], 
    'userEmail' : [null, Validators.email], 
    'desc' : [null, Validators.compose([Validators.required, 
Validators.minLength(30), Validators.maxLength(500)])], 
    'validate' :'' 
    }); 
} 

addPost(post){ 
    this.desc = post.desc; 
    this.name = post.name; 
} 

} 

这里是我的app.component.hmtl代码

<div *ngIf="!name;else formInfo"> 
<form [formGroup]="rForm" (ngSubmit)="addPost(rForm.value)"> 
<div class="form-container"> 
    <div class="row columns"> 

    <h1>My Reactive Form</h1> 

    <label>Name 
     <input type="text" formControlName="name"> 
    </label> 
    <div class="alert" *ngIf="!rForm.controls['name'].valid && 
    rForm.controls['name'].touched">{{titleAlert}}</div> 

    <label>Email 
     <input type="text" formControlName="userEmail"> 
     </label> 
     <div class="alert" *ngIf="!rForm.controls['userEmail'].valid && 
     rForm.controls['userEmail'].touched">{{emailError}}</div> 

     <label>Description 
     <input type="text" formControlName="desc"> 
    </label> 
    <div class="alert" *ngIf="!rForm.controls['desc'].valid && 
    rForm.controls['desc'].touched">Description should be between 30 to 50 
    characters.</div> 

     <label for="validate">Minimum of 3 characters</label> 
     <input type="checkbox" name="validate" formControlName="name" 
    value="1">On 
     <input type="submit" class="button expanded" value="Submit Form" 
     [disabled]="!rForm.valid"> 
    </div>  
    </div> 
    </form> 
</div> 

<ng-template #formInfo> 
    <div class="form-container"> 
    <div class="row columns"> 
     <h1>{{name}}</h1> 

     <p>{{desc}}</p> 
    </div> 
</div> 
</ng-template> 

我想要的当用户在电子邮件输入中输入电子邮件时，如果它写错了电子邮件，所以我应该得到单独的错误，如“输入有效的电子邮件”，如果用户离开电子邮件输入空，并跳转到另一个字段然后我应该得到一个像“此字段是必需的”的错误我该如何实现这一目标？

Answer 1

hasError我相信会工作。

*ngIf="!rForm.controls['userEmail'].hasError('required') 

见例如：https://material.angular.io/components/input/overview#error-messages