自定義驗證Angular2

Question

我想因爲我曾經

[hidden]="email.valid && email.untouched" 

等的一個創建自定義的驗證，是不是對我來說足夠。我想顯示不同的消息： 1.電子郵件無效，並且2.需要電子郵件。

現在，當表單加載時，我沒有顯示驗證消息，這很好，但問題是當我想在顯示/隱藏消息的過程中在字段外輸入或點擊時。

我需要什麼：

1. 在打字，當輸入場是焦點，不顯示驗證消息。
2. 一旦我輸入「example @ gmail」，並在字段外單擊，我想顯示驗證郵件，該郵件是無效的，但是當我再次單擊該字段以恢復打字時，我想刪除郵件直到我再次退出輸入字段。
3. 當我刪除的內容「例如@ gmail的」，我想，當我專注的領域

我知道它的很多，但我可以顯示消息「電子郵件是必需的」，並再次將其隱藏真的真的使用自定義驗證的幫助。我使用模式的電子郵件和有效/原始/感動，但我不能得到我需要的。

Answer 1

對於角度4和以上：

According to This you can use "email validator". 

Example: 

If you use template-driven forms: 

<input type="email" name="email" email> 
<input type="email" name="email" email="true"> 
<input type="email" name="email" [email]="true"> 

如果使用模型驅動的形式（又名ReactiveFormsModule）使用Validators.email：

this.myForm = this.fb.group({ 
    firstName: ['', [<any>Validators.required]], 
    email: ['', [<any>Validators.required, <any>Validators.email]], 
});