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

}

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

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

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

喜欢：

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

这将从验证器本身返回。

还是有另一种方法（除了将所有内容存储在某个地方的变量中）？

4

2 回答 2

2

是的，您可以从验证器返回任何对象。在您的情况下，它可能类似于

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

于 2017-04-05T07:35:18.887 回答
1

ValidatorFn应该返回 a {[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;
  };
}

然后你可以像访问这个错误myFormControl.errors.myValidator。

于 2017-04-05T07:28:25.637 回答