Material2 - Datepicker 사용자 정의 유효성 검사기 값이 문자열이 아닌 날짜 객체를 반환합니다.

Question

반응 형 그룹을 사용하여 datepicker에 대한 사용자 정의 유효성 검사기를 작성했습니다. 내 .TS에

항상 JS 날짜 오브젝트를 돌려 그 위의 예에서 내 수업 CustomValidatorService

validDate(c: AbstractControl): any { 
    // It always return 'Mon Jan 01 2001 00:00:00 GMT+0800 (Taipei Standard Time)' 
    // When value is 1 
    // And 'Sat Dec 01 2001 00:00:00 GMT+0800 (Taipei Standard Time)' 
    // When value is 12 
    console.log(c.value); 
} 

에서

form: FormGroup; 

constructor(
    private fb: FormBuilder, 
    private validatorSrv: CustomValidatorService, 
) {} 

createForm(): void { 
    this.form = this.fb.group({ 
     trans_date: [null, [Validators.required, this.validatorSrv.validDate]] 
    }); 
} 

이제 파일.

어떻게 사용자 정의 유효성 검사기 AbstractControl에서 실제 입력 값을 얻을 수 있습니까?

Answer 1

이것은 일반적인 행동입니다. 당신이 할 수있는 일은 유효성 검사기에서 날짜를 문자열로 변환하는 것입니다.

모르겠 으면 각도 재질의 datepicker에서 실제로 moment.js를 사용할 수 있습니다.

귀하의 경우에는 어쩌면 사용할 수 있습니까? 이것은 당신의 문제를 해결할 것입니다, 당신은 단지 많은 기능 중 하나를 사용하여 날짜를 변환해야 할 것입니다 순간.

Answer 2

맞춤법 검사가 가장 간단하거나 권장되는 방법인지 잘 모릅니다. 문자열 형 사용자 입력 대신 날짜 객체를 사용하는 것이 일반적인 동작이므로 AbstractControl 사용자 지정 형식 유효성 검사를 사용하면 상황이 더욱 복잡해집니다.

그래서 그냥 컨트롤의 keypress 이벤트에 간단한 함수를 작성하고 그런 식으로 유효성 검사를 시도하십시오.

isValidDate(): boolean { 
    // A lengthy logic was omitted here for simplicity sake... 
    if (format is mm/dd/yyyy or mm-dd-yyyy) { return true; } 
    return false; 
} 


onTransDateKeydown(e: any): void { 
    const c = this.form.get('trans_date'); 

    if (this.isValidDate(e.target.value)) { 
     c.setErrors(null); 
    } else { 
     c.setErrors({ invalidDate: true }); 
    } 
} 

프로그래밍 방식 setErrors() 방법을 사용하여 ReactiveForm 제어에 오류를 줄 수있는 그 굉장합니다.