[ANGULAR] 사용자 정의 구성 요소 (FormControl이 아닌)에 대한 유효성 검사기를 크레이트 할 수 있습니까?

사용자 정의 구성 요소 (FormControl이 아닌)에 대한 유효성 검사기를 크레이트 할 수 있습니까?

해결법

1. ---

   1.Karina, 모든 구성 요소의 유효성을 검사 할 수 없습니다. 사용자 정의 양식 컨트롤을 사용하는 특별한 구성 요소의 유효성을 검사 할 수 있습니다. 사용자 정의 양식 컨트롤에서 사용자 정의 양식 컨트롤의 유효성 검사기를 만들 수 있습니다. 그러나 이것은 ControlValueAccessor를 구현해야합니다.

   Karina, 모든 구성 요소의 유효성을 검사 할 수 없습니다. 사용자 정의 양식 컨트롤을 사용하는 특별한 구성 요소의 유효성을 검사 할 수 있습니다. 사용자 정의 양식 컨트롤에서 사용자 정의 양식 컨트롤의 유효성 검사기를 만들 수 있습니다. 그러나 이것은 ControlValueAccessor를 구현해야합니다.

   물론 구성 요소와 예를 들어도 사용할 수 있습니다. 입력 호출로 변경 사항으로 변경되지만 실제로 유효성 검사가 아닙니다.

   사용자 정의 양식 컨트롤에 제어 내부의 유효성 검사기가있는 경우 사용자 정의 양식 컨트롤이 제공자 ng_validators로 추가되어야하며 같을 것입니다.

   @Component({
     selector: 'app-custom-form-control',
     template: `...
     `,
     providers: [
       {
         provide: NG_VALUE_ACCESSOR,
         useExisting: forwardRef(() => CustomFormControl),
         multi: true
       },
       {
     provide: NG_VALIDATORS,
     useExisting: forwardRef(() => CustomFormControl),
     multi: true,
   }
     ]
   
   })
   export class CustomFormControl implements ControlValueAccessor {
   
     onChange;
     onTouched;
   
     constructor(el:ElementRef){}
     writeValue(value: any[]|any): void {
           ...receive a value, make something to show it...
     }
   
     registerOnChange(fn: any): void {
       this.onChange = fn;
     }
   
     registerOnTouched(fn: any): void {
       this.onTouched = fn;
     }
   
     setDisabledState(isDisabled: boolean): void {
     }
   
     //A function that, when some happens, send a change
     setValue(value: any) {
       this.onChange(...)
     }
   
     focusOut()
     {
       this.onTouched()
     }
   
     validate(control: AbstractControl): ValidationErrors | null{
        ..your logic here..
       return null
     }
   }
   

from https://stackoverflow.com/questions/54645878/is-it-possible-to-crate-a-validator-for-a-custom-component-not-for-a-formcontro by cc-by-sa and MIT license