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，帶參數的自定義驗證消息

回答

相關問題