角度表单验证提示打印答案

【问题标题】：Angular form validation hint printing角度表单验证提示打印
【发布时间】：2021-12-27 20:04:54
【问题描述】：

我正在用 Angular 构建一个表单，并且我正在为每个字段使用验证器，html 表单看起来像这样：

<form [formGroup]="form">
      <mat-form-field>
        <label translate>Name field</label>
        <input formControlName="name" matInput>
      </mat-form-field>
...

在 .ts 文件中，我使用以下命令初始化表单：

ngOnInit() {
    this.initializeForm();
  }

  initializeForm() {
    this.form = this.fb.group({
      nameControl: new FormControl(this.initialShare?.name, [Validators.required, noWhitespaceValidator]),
      ...
    });
  }

noWhitespaceValidator 是一个自定义验证器，用于检查用户输入是否仅包含空格。

我的问题是，我如何添加一段文本来显示哪个验证器未通过，例如，我想打印：如果 Validators.required 失败，则需要名称，或者，名称不能仅由空格，如果 noWhitespaceValidator 失败。

【问题讨论】：

当表单验证未通过时，您可以通过实现一个snackbar/modal/dialog 来做到这一点..
@iLuvLogix 主要问题是我不知道如何检查验证是否通过，更确切地说，是哪个验证器
你可以使用 i.E. ngif <div *ngIf="form.controls['name'].invalid && (form.controls['name'].dirty || form.controls['name'].touched)" class="alert"> <div *ngIf="form.controls['name'].errors.required"> Please enter username </div> 只是一个示例，formfield-names 和验证器需要更改为您拥有的任何内容..
查看 -> pluralsight.com/guides/… 了解更多信息

标签： angular

【解决方案1】：

如果您使用的是 Material Inputs，您可以使用 mat-error 显示您的错误

像这样

 <mat-form-field>
        <label translate>Name field</label>
        <input formControlName="nameControl" matInput>
        <mat-error *ngIf="form.get('nameControl').hasError('required')">Name is required</mat-error>
        <mat-error *ngIf="form.get('nameControl').hasError('THE_ERROR_NAME_THAT_IS_RETURNING_FROM_VALIDATOR')"> Name cannot be composed of only whitespaces</mat-error>
 </mat-form-field>

请注意：THE_ERROR_NAME_THAT_IS_RETURNING_FROM_VALIDATOR 字段应替换为从noWhitespaceValidator 返回的键验证器

【讨论】：

谢谢，它可以完美地处理一个小抱怨，只有在我切换到另一个字段后才会出现错误消息，不能设置为实时显示吗？例如每次击键后？
这是Material Form Field Elements的默认行为，当formControl被触摸并且无效时错误是可见的。 formControl 将在blur 事件上标记为已触摸（当输入失去焦点时），因此这意味着当用户第二次开始在触摸输入上输入时，错误将在用户输入过程中出现/消失

【解决方案2】：

就像@iLuvLogix 在 cmets 中所说的

<div *ngIf="form.controls['nameControl'].errors.noWhitespaceValidator class="alert">
   Name cannot be composed of only whitespaces
</div>            
<div *ngIf="form.controls['nameControl'].errors.required">
         Name is required
</div>

查看此链接：https://angular.io/guide/form-validation

【讨论】：

我读过那篇文章，但如果我尝试使用 *ngIf="form.controls['nameControl'].errors.CUSTOM_VALIDATOR_NAME" 它无缘无故地不起作用，有什么想法吗？