角度表单验证提示打印

Question

我正在用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.requested失败，Name是必需的，或者，如果noWhitespaceValidator失败，Name不能只由空格组成。

Answer 1

如果使用材料输入，可以使用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返回的密钥验证器

Answer 2

这就像@iLuvLogix在评论中所说的那样

<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