角2、パラメータ付きのカスタム検証メッセージ

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 

が、これはバリデータ自体から返されます。

（別の場所に変数を格納することは別として）別の方法がありますか？

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 1

ValidatorFnは、{[k:string]:any}を返す必要があります。

Answer 2

はい、バリデーターからオブジェクトを返すことができます。

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

それとも、より良いパラメータを持ついくつかのローカライズとのメッセージを使用します。あなたのケースでは、フィールドの検証エラーを表示する場合は、あなたがこれを行うことができ

return { minImageDimensions: { min: minWidth, value: actualWidth } } 

のようなものである可能性があります。フィールドオブジェクトを取得し、myField.errorsオブジェクトに基づいてアプリケーションで使用するあらゆる種類のエラーメッセージを表示するコンポーネントを作成できます。