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;
};

}

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

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

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

像：

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

Answer 2

float应该返回ValidatorFn，所以就像这样简单：

{[k:string]:any}

然后您可以像export function MinImageDimensionsValidator(minWidth: number, minHeight: number): ValidatorFn { return (control: AbstractControl): { [key: string]: any } => { if (actualWidth < minWidth) { return { myValidator: `Min width has to be ${minWidth}. you supplied ${actualWidth}` }; } return null; }; }一样访问此错误。

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

2 个答案: