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

我刚刚开始使用JS/Typescript和Angular 2，并且我正在努力处理以下内容。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

这会从验证自身返回。

还是有另一种方式（除了将变量存储在某处）？

来源

2017-04-05 Arikael

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

那么你就可以像访问myFormControl.errors.myValidator此错误。

来源

2017-04-05 07:28:25 n00dl3

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

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-05 07:35:18

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

回答

相关问题