角4のカスタム検証エラーメッセージ

Question

角度4（反応形式）を使用しているフォームで作業していますが、私の問題は電子メールアドレスフィールドのエラーメッセージを個別に表示できません。

私はこのフォーマットを試していますが、運はありません。

<div *ngIf="name.invalid && (name.dirty || name.touched)" 
    class="alert alert-danger"> 

    <div *ngIf="name.errors.required"> 
    Name is required. 
    </div> 
    <div *ngIf="name.errors.minlength"> 
    Name must be at least 4 characters long. 
    </div> 
    <div *ngIf="name.errors.forbiddenName"> 
    Name cannot be Bob. 
    </div> 

は、これは私のサンプルコードです

register.component.ts

constructor(private fb: FormBuilder) { 

    this.rForm = fb.group({ 

    'account': [null, Validators.required], 
    'company': [null, Validators.required], 
    'website': '', 
    'email': [null, Validators.compose([Validators.email, Validators.required])], 
    'phone': [null, Validators.required], 

    }) 

    } 

register.component.html

<div class="col-md-6"> 
    <label>Email Address</label> 
    <input type="email" name="email" class="form-control" formControlName = "email"> 
    <span class="text-danger" *ngIf="!rForm.controls['email'].valid && rForm.controls['email'].touched">This field is required. Please provide a valid email address.</span> 

ありがとうございました。

Answer 1

まず、rForm.controls['email'].validの代わりにrForm.get('email').validを使用してください。

それを行うための簡単な方法は、あなたのクラスに次のコードを追加することです：

get email() { return this.rForm.get('email'); } 

代わりに、あなたのテンプレートでrForm.get('email').validを使用してのその方法は、あなたがemail.validを使用することができます。

私は一緒にここで働いplnkr（http://plnkr.co/edit/bDANlDxej3hAKQFx9sra?p=preview）