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

}

이는 발리 공장의 아주 기본적인 예이다.

모든 예제 난 그냥 (I 템플릿 양식을 사용하고 있습니다)

는 검증 자체를 사용 매개 변수에 검증 메시지 "를 묶어"수 있나요 템플릿에서 직접 확인 메시지/오류를 썼다 발견 그것?

좋아 :

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

이

는 검증 자체에서 반환됩니다.

또는 다른 방법이 있습니까 (변수를 어딘가에 저장하는 것과 별도)?

Answer 1

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처럼이 오류에 액세스 할 수 있습니다.

Answer 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 객체에 따라 표시하는 구성 요소를 만들 수 있습니다.