在取消按鈕被觸發前激活了角度表單驗證

我正嘗試在模態對話框內創建一個帶有驗證的小表單。該對話框中有一個取消按鈕應該隱藏對話框：在取消按鈕被觸發前激活了角度表單驗證

我創建了一個小項目，以驗證：

名稱字段有一個驗證這是如果名稱留空，則觸發。顯示對話框時，輸入字段獲得焦點。

現在的問題是按下取消而不輸入任何文本。

驗證在觸發按鈕的點擊處理程序之前開始。結果是顯示錯誤消息。這將取消按鈕向下移動，並且點擊進入涅v。

您可以通過單擊取消按鈕的頂部驗證此行爲。如果您單擊底部，所有內容都按預期工作（除了我不希望顯示驗證消息）。

所以......想什麼，我有：

觸發驗證，如果用戶

觸發沒有驗證，如果用戶

類似的問題，表明該可以以任何形式發生，而不僅僅在模態內：https://stackoverflow.com/questions/45015403/angular-2-form-validators-messing-with-the-cancel-button – rmcsharry

我有同樣的問題。我試着在取消按鈕上進行type =「reset」和type =「button」，但是這並不能解決問題。問題在於點擊處理程序觸發Cancel按鈕之前，驗證在字段的模糊事件上觸發。 – rmcsharry

我覺得你的問題在於在你的錯誤標籤的條件之外

點擊。

當輸入被訪問時觸發的屬性被觸發。當輸入被改變時，觸發屬性dirty。

所以，你需要刪除觸摸狀態，嘗試用這種替代你的錯誤標籤代碼：

<label *ngIf="myForm.controls.name.errors && myForm.controls.name.dirty">

您可以瞭解更多有關正式文件形式：https://angular.io/guide/forms

2017-09-25 18:16:16

嗨，對 - 這是一個選項 - 但經過測試...這不完全是我想要的。我已經更新了上面的文字。現在的問題是，如果您通過單擊外部/按下標籤離開該字段，您將得不到任何反饋... –

回答