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>

Example Form

我需要将这些错误消息移动到我的组件文件中。有什么办法吗？

Answer 1

我已经创建了一个简单的用户注册表单并在上面实施了一些内置验证。除了内置验证，我们还将为模板驱动的表单实现一些自定义验证。

我们将为该演示考虑以下自定义验证：

正在检查用户名是否可用。
密码模式验证
匹配在两个不同字段中输入的密码

模板驱动表单示例如下：

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

angular 模板驱动的表单验证消息

angular template driven form validation messages

javascript

angular

angular-validation