如何觸發按鈕單擊angular2上的表單驗證

Question

我正在angular2應用程序中，我必須在輸入字段上應用驗證。

我這裏有相同的代碼

http://plnkr.co/edit/6RkM0eRftf3KQpoDCktz?p=preview

它的工作對我很好，但我想觸發按鈕，點擊確認並顯示它們是無效

目前它激活了所有的驗證消息當我點擊字段。

我已經試過這

saveUser() { 
     if (this.userForm.valid) { 
      alert(`Name: ${this.userForm.value.name} Email: ${this.userForm.value.email}`); 
     } else { 
      this.userForm.validator(); 
     } 
    } 

它不按預期工作。

如何觸發按鈕點擊驗證，我希望按鈕始終處於活動狀態。

Answer 1

顯示錯誤時，您可以嘗試利用窗體控件的submitted屬性。這可以用於相應的ngIf來顯示這些消息。

<span *ngIf="submitted && !this.userForm.controls.email.valid">...</span> 

您需要調用saveUser方法時至submitted屬性默認初始化爲false，並將其設置爲true：

@Component({ 
}) 
export class SomeComponent { 
    constructor() { 
    this.submitted = false; 
    } 

    saveUser() { 
    this.submitted = true; 
    (...) 
    } 
} 

這樣，他們將在表單被提交後，纔可見。