表單驗證失敗后如何顯示模式？

Question

在Angular中使用反應式表單時，我們通常會在教程中看到同步驗證器以及表單控件下帶有錯誤的小<p>或<span> 。 這個元素有一個簡單的*ngIf來控制其顯示。

不過，當異步驗證程序失敗時，我需要顯示一個模式。 根據我在ng-bootstrap和ngx-bootstrap中看到的內容，模態已打開，調用了一個函數，並且未完全偵聽驗證中的更改（使用<p>和*ngIf可以輕松完成此*ngIf ）。

當前，我在表單控件中使用了一個更改偵聽器，該偵聽器調用用於驗證它的API。 如果API返回無效，我將引發一個包含在表單控件的同步驗證器中的標志（因此使整個表單無效），然后從那里也打開模式。 （最終我沒有使用異步驗證器）。

該代碼對我來說很有趣。

有一個更好的方法嗎？ 謝謝！

Answer 1

如果你已經有了一個異步驗證連接，你必須使用statusChanges FormControl的財產，與distinctUntilChanged管，以防止重復：

this.userForm.get('username').statusChanges
  .pipe(distinctUntilChanged())
  .subscribe(status => {
     // if status is invalid, open dialog or whatever yo like
     console.log('Username validation status: '+ status);
  }); 

Answer 2

我喜歡使用ngx-smart-modal庫進行這種模式的內務處理。

文件=> https://www.npmjs.com/package/ngx-smart-modal

當涉及模態時，該庫使管理打開/關閉/數據傳遞/定制/等非常容易。