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

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

这是我的自定义验证器：

从'@angular/forms'导入{AbstractControl，ValidationErrors，ValidatorFn}；
导出函数jsonValidator（控件：AbstractControl）：ValidationErrors | null{
试一试{
parse（control.value）；
}捕获（e）{
log（“无效JSON”）；
返回{jsonInvalid:true}；
}
返回null；
};

这是.ts文件

从'@angular/core'导入{Component，OnInit}；
从'@angular/forms'导入{FormBuilder，Validators，FormGroup}；
从'src/app/Validators/jsonValid'导入{jsonValidator}；
@组成部分({
选择器：“应用程序电子邮件正文编辑器”，
templateUrl:'./电子邮件正文编辑器.component.html'，
样式URL:['./电子邮件正文编辑器.component.scss']
})
导出类EmailBodyEditorComponent实现OnInit{
errorMsg:string=“无效JSON”；
form=this.fb.group({
jsonField:[null，[Validators.required，jsonValidator]]
});
构造函数（私有fb:FormBuilder）{
}
提交（）：作废{
console.log（this.form）；
}
ngOnInit（）：void{
}   
}

最后是HTML文件

文本区域


{{errorMsg}}

您的验证错误名称是

jsonInvalid

，而不是

jsonValidator

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

返回{jsonInvalid:true}；

您应该在HTML中使用此选项：

{{errorMsg}}

---

演示：

Mate，你的一个传奇，我一直在这个问题上纠缠了一段时间，先生代码：）顺便说一句，我调试这个的方式是在HTML中显示实际的json<代码>{form.controls.jsonField.errors | json}}啊，这很聪明，我喜欢，非常感谢你花时间，我真的很感激