<mat-error> 为每个自定义验证角度创建

Question

我正在验证一个输入，为此我创建了2个自定义验证器。我无法将每个自定义验证器与特定的mat错误关联起来。

我把我的代码留在下面，我感谢的任何帮助

自定义验证器：

ValidateNumbLength(control: AbstractControl) : ValidationErrors | null  {

let numb = control.value;
let lengthNumb!: string;

if (numb != null){
lengthNumb = numb.toString();
}else {
return  { 'numb invalid!': true };
}

if (lengthNumb.length == 1 || lengthNumb.length == 3 ) {
return null;
}if (lengthNumb.length == null){
return  { 'numb invalid!': true };
}
else {
return  { 'numb invalid!': true };
}
}

ValidateNnmbValue(control: AbstractControl) : ValidationErrors | null  {

let numb = control.value;
let lengthNumb!: string;

if (numb != null){
lengthNumb = numb.toString();
}else {
return  { 'numb invalid!': true };
}


if (numb == 0.5 || numb == 1.0 || numb == 1.5 ){
return null;
} if (lengthNumb.length == null){
return  { 'numb invalid!': true };
}
else {
return  { 'numb invalid!': true };
}
}

表单控制：

this.nominalSizeGroup = this._formBuilder.group({

numb: ['', [ Validators.compose([Validators.required, Validators.min(0)]), this.ValidateNumbLength, this.ValidateNnmbValue]],
});

<mat-error *ngIf="(nominalSizeGroup.get('numb')?.touched || nominalSizeGroup.get('numb')?.dirty) && nominalSizeGroup.get('numb')?.invalid && nominalSizeGroup.get('numb')?.hasError('ValidateCoolingTomsLength')">
Cooling tons must be 1 or 3 characters.
</mat-error>
<mat-error *ngIf="nominalSizeGroup.get('numb')?.invalid">
You have entered an incorrect value.
</mat-error>

Answer 1

您使用验证器返回的密钥是输入将要发生的错误的名称。在您的情况下，所有情况下的密钥都是'numb invalid!'。所以要检查这些错误，它是：

nominalSizeGroup.get('numb')?.hasError('numb invalid!')

如果你想要不同情况下的不同消息，你需要重命名错误：

ValidateNumbLength(control: AbstractControl) : ValidationErrors | null  {
let numb = control.value;
if (!numb) return { numbIsFalsey : true };
const lengthNumb = numb.toString();
if (lengthNumb.length === 1 || lengthNumb.length === 3 ) {
return null;
else {
return  { wrongLength: true };
}
}

<mat-error *ngIf="nominalSizeGroup.get('numb')?.hasError('numbIsFalsey')">
Please enter a value.
</mat-error>
<mat-error *ngIf="nominalSizeGroup.get('numb')?.hasError('wrongLength')">
Cooling tons must be 1 or 3 characters.
</mat-error>

只是一个附带说明：您永远不应该使用==来表示相等，这只存在于遗留代码中，===是正确的方式。