2017-11-09 18 views
0

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

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

答えて

3

まず、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

+0

が、それは仕事、あなたの先生に感謝を入れています!あなたの助言に従ってください。 –

関連する問題