Angular2、自定义带参数验证消息

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

}

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

我找到的所有例子都直接在模板中写了验证messages/errors（我使用的是模板表单）

是否可以 "tie" 将验证消息发送到验证器本身并使用参数？

喜欢：

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

这将从验证器本身返回。

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

Answer 1

ValidatorFn 应该 return 一个 {[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 一样访问此错误。

Answer 2

是的，您可以 return 来自验证器的任何对象。在您的情况下，它可能类似于

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

Angular2、自定义带参数验证消息

Angular 2, custom validation messages with parameters

validation

angular

angular-validation