角度:将两个垫错误元素合并为一个

Question

我对 Angular 很陌生，我按照他们官方网站上的教程进行操作。出于兴趣，我想问一下，当用户输入她/他的邮件时，是否有可能组合错误处理(使用 Angular 材料完成(。根据发生的错误代码，我显示不同的错误消息。

errorHandling = (control: string, error: string) => {
return this.checkoutForm.controls[control].hasError(error);
}

<div>
<mat-form-field>
<input matInput placeholder="Enter your email" formControlName="email">
<!-- How to combine these two mat-error elements to one? -->
<mat-error *ngIf="errorHandling('email', 'required')">
Enter email
</mat-error>
<mat-error *ngIf="errorHandling('email', 'email')">
Invalid email
</mat-error>
</mat-form-field>
</div>

Answer 1

通常你可以做一个函数。 此函数可以获取所有错误中的第一个错误

getError(control:AbstractControl)
{
let error=null;
if (control.errors)
{
const firstKey = Object.keys(control.errors)[0];
switch (firstKey)
{
case 'required':
error={error:'required'}
break;
case 'minlength':
error={error:' is required '+control.errors.minlength.requiredLength+' characteres'}
break;
case 'pattern':
error={error:' don't match with pattern'}
break;
case 'maxlength':
error={error:' is required less than '+control.errors.maxlength.requiredLength+' characteres'}
break;
}
}
return error
}

然后

<mat-error >
getError(form.get('email')?.error)
</mat-error>

或者遍历所有错误

getError2(control:AbstractControl)
{
let error=[];
if (control.errors)
{
Object.keys(control.errors).forEach(firstKey=>{
switch (firstKey)
{
case 'required':
error.push({error:'required'})
break;
case 'minlength':
error.push({error:' is required '+control.errors.minlength.requiredLength+' characteres'})
break;
case 'pattern':
error.push({error:' don't match with pattern'})
break;
case 'maxlength':
error.push({error:' is required less than '+control.errors.maxlength.requiredLength+' characteres'})
break;
}
})
}
return error.length?error.map(x=>x.error).join(','):null
//we can return the array too
// return error.length?error:null
}

并写

<mat-error >
{{getError2(userAddressValidations.get('firstName'))}}
</mat-error>
//if we received  an array
<mat-error >
<ul>
<li *ngFor="let error of getError2(userAddressValidations.get('firstName'))">
{{error.error}}
</li>
</ul>
</mat-error>

查看堆栈闪电战

Answer 2

您可以检查表单控件上是否存在errors对象。如果有任何错误，那么它将是一个有效的对象，每个键都引用错误。如果没有错误，则它将是一个null值。

<div>
<mat-form-field>
<input matInput placeholder="Enter your email" formControlName="email">
<!-- Just check if the errors object exists on the form control -->
<mat-error *ngIf="checkoutForm.controls['email'].errors">
Combined error message
</mat-error>
</mat-form-field>
</div>