angular 模板驅動的表單驗證消息

Question

我正在使用 angular 模板驅動表單。 目前我在 HTML 頁面中顯示錯誤消息。

    <input 
  type="email" 
  name="email" 
  ngModel 
  #email="ngModel" 
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" 
  required>
<br/>

<div *ngIf="email.touched">
  <p *ngIf="email.errors?.required">Email is a required</p>
  <p *ngIf="email.errors?.pattern">This is not a valid Email!!!</p>
</div>

示例表格

我需要將這些錯誤消息移動到我的組件文件中。 有什么辦法嗎？

Answer 1

我創建了一個簡單的用戶注冊表單並在其上實施了一些內置驗證。 除了內置驗證，我們還將為模板驅動的表單實現一些自定義驗證。

我們將為此演示考慮以下自定義驗證：

• 檢查用戶名的可用性。

• 密碼模式驗證

• 匹配在兩個不同字段中輸入的密碼

以下是模板驅動表單的示例：

https://stackblitz.com/edit/angular-ivy-eqbltt