如何显示来自角度验证器的错误？_如何在角度材料表下面显示来自API的错误_基于来自服务器的响应，提交时角度4显示错误 - 腾讯云开发者社区

在Angular应用程序中，表单验证是通过使用Reactive Forms或Template-driven Forms来实现的。角度验证器（Angular Validators）用于在用户输入时检查表单控件的值是否有效。当验证失败时，错误信息需要以某种方式显示给用户。

基础概念

Reactive Forms：提供了一种模型驱动的方式来处理表单输入和验证。
Template-driven Forms：依赖于模板中的事件绑定和ngModel指令来处理表单输入。
Validators：是一组函数，用于检查表单控件的值是否满足特定条件。

显示错误信息的优势

用户友好：及时反馈可以帮助用户纠正输入错误。
数据完整性：确保提交的数据符合预期的格式和要求。

类型

同步验证器：立即检查输入值并返回结果。
异步验证器：可能需要请求外部资源来验证输入值。

应用场景

注册和登录表单
信用卡信息输入
搜索查询验证

如何显示错误信息

使用Reactive Forms

<form [formGroup]="registerForm">
  <div>
    <label for="email">Email</label>
    <input id="email" formControlName="email">
    <div *ngIf="registerForm.get('email').invalid && (registerForm.get('email').dirty || registerForm.get('email').touched)">
      <div *ngIf="registerForm.get('email').errors.required">Email is required.</div>
      <div *ngIf="registerForm.get('email').errors.email">Invalid email format.</div>
    </div>
  </div>
  <!-- 其他表单字段 -->
</form>

使用Template-driven Forms

<form #registerForm="ngForm">
  <div>
    <label for="email">Email</label>
    <input id="email" name="email" [(ngModel)]="user.email" required email>
    <div *ngIf="registerForm.controls['email'].invalid && (registerForm.controls['email'].dirty || registerForm.controls['email'].touched)">
      <div *ngIf="registerForm.controls['email'].errors?.required">Email is required.</div>
      <div *ngforEach="let error of registerForm.controls['email'].errors | keyvalue">{{error.key}}: {{error.value}}</div>
    </div>
  </div>
  <!-- 其他表单字段 -->
</form>