validation - Angular 2，带参数的自定义验证消息

Question

我刚刚开始使用 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;
};

}

这只是验证器工厂的一个非常基本的示例。

我发现的所有示例都直接在模板中写入验证消息/错误(我正在使用模板表单)

是否可以将验证消息“绑定(bind)”到验证器本身并使用参数？

喜欢:

'Min width has to be 100. you supplied ' + actualWidth

这将从验证器本身返回。

或者还有其他方法(除了将所有内容存储在变量中之外)？

Answer 1

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

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 对象显示您在应用程序中使用的各种错误消息。