Validation Angular 2，带有参数的自定义验证消息

我只是从JS/Typescript和Angular 2开始，我正在努力解决以下问题

export function MinImageDimensionsValidator(minWidth: number, minHeight: number): ValidatorFn {

return (control: AbstractControl): { [key: string]: any } => {

        // it's an image control where a user uploads an image.
        // the whole image related code has been removed for better readability. 
        //Just assume that 'actualWidth' holds the actual width of the image

        if(actualWidth < minWidth) {
           return { valid: false };
        }

        return null;
};

这将从验证器本身返回

---

或者有其他方法（除了将所有内容存储在变量中的某个位置）吗？

验证器fn

应该返回一个

{[k:string]：any}

，因此它非常简单：

导出函数MinImageDimensionsValidator（minWidth:number，minHeight:number）：验证器fn{
return（control:AbstractControl）：{[key:string]：any}=>{
if（实际宽度<最小宽度）{
返回{
myValidator:`Min width必须是${minWidth}。您提供了${actualWidth}`
};
}
返回null；
};
}

---

然后您可以访问此错误，如

myFormControl.errors.myValidator

是的，您可以从验证器返回任何对象。在你的情况下，可能是这样的

return { minImageDimensions: { min: minWidth, value: actualWidth } }

显示字段验证错误时，可以执行以下操作：

<input #myField="ngModel" [(ngModel)]="...">
<span *ngIf="myField.errors.minImageDimensions">
    Min width has to be {{ myField.errors.minImageDimensions.min }}.
    You supplied {{ myField.errors.minImageDimensions.value }}.
</span>

最小宽度必须为{myField.errors.minImageDimensions.Min}。
您提供了{myField.errors.minImageDimensions.value}。

或者更好地使用一些本地化和带有参数的消息。您可以创建一个组件，该组件将接受字段对象，并根据myField.errors对象显示应用程序中使用的各种错误消息

<input #myField="ngModel" [(ngModel)]="...">
<span *ngIf="myField.errors.minImageDimensions">
    Min width has to be {{ myField.errors.minImageDimensions.min }}.
    You supplied {{ myField.errors.minImageDimensions.value }}.
</span>