如何显示自定义验证错误消息

Question

对于我的表单，它只有一个输入，那就是一个文本区域，用户在其中输入JSON代码，如果文本不是有效的JSON，它应该显示一条错误消息，但由于某种原因，它不起作用。

这是我的自定义验证器：

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
export function jsonValidator(control: AbstractControl): ValidationErrors | null {
try {
JSON.parse(control.value);
} catch (e) {
console.log("Not Valid JSON");
return { jsonInvalid: true };
}
return null;
};

这是.ts文件

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { jsonValidator } from 'src/app/Validators/jsonValid';
@Component({
selector: 'app-email-body-editor',
templateUrl: './email-body-editor.component.html',
styleUrls: ['./email-body-editor.component.scss']
})
export class EmailBodyEditorComponent implements OnInit {
errorMsg : string = "Not VALID JSON";
form = this.fb.group({
jsonField: [null, [Validators.required , jsonValidator]]
});
constructor(private fb: FormBuilder) {
}
submit(): void {
console.log(this.form);
}
ngOnInit(): void {
}   
}

最后是HTML文件

<form [formGroup]="form" (submit)="submit()">
<mat-form-field appearance="fill">
<mat-label>Textarea</mat-label>
<textarea matInput
formControlName="jsonField" 
cols="1000" 
placeholder="my custom json here" 
cdkTextareaAutosize 
cdkAutosizeMinRows="10"
cdkAutosizeMaxRows="50">
</textarea>
</mat-form-field>
<br>
<div *ngIf="form.controls.jsonField.hasError('jsonValidator')">
{{errorMsg}} 
</div>
</form>

Answer 1

您的验证错误名称是jsonInvalid，而不是jsonValidator。

该名称由验证器函数中的return语句定义。

return { jsonInvalid: true };

你应该在你的HTML:中使用这个

<div *ngIf="form.controls.jsonField.hasError('jsonInvalid')">
{{errorMsg}} 
</div>

演示：https://stackblitz.com/edit/angular-h89jju