必要なエラーとメールパターンを個別に取得する方法4？

Question

私はアングル4反応形式検証を実装しています。私は、フォームのこのレイアウトを持つ

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

私がすることを望む

ここ

は

ここ

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コードである私のapp.component.tsコードですユーザーが電子メール入力で電子メールを入力しているときに間違った電子メールを書き込むと、「有効な電子メールを入力」のような別のエラーが表示され、ユーザーが電子メール入力を空にして別のフィールドにジャンプする「このフィールドは必須です」というエラーが表示されるはずです。これをどのように達成できますか？

Answer 1

hasError私はうまくいくと思います。

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

例を参照してください。https://material.angular.io/components/input/overview#error-messages