如何将焦点设置到验证器 function 内部验证失败的控件？

Question

I have a custom validator function as follows:

export function numRangeValidator(min: number, max: number): ValidatorFn {
return (control: AbstractControl): { [key: string]: boolean } | null => {
    let tempVal;
    try {
        tempVal = typeof (control.value) === 'number' ? +control.value : +control.value.replace(/[pP]/g, '');
    } catch { }
    if (control.value === null || control.value === '' || control.value === undefined || !control.value) {
        return null;
    }
    if (control.value !== undefined && (isNaN(tempVal) || tempVal < min || tempVal > max)) {
        control.setValue('');
        return { 'numRange': true };
    }
    return null;
};
}

as you can see inside, I set the control's value to '' (empty) when it fails validation.
I would also like to set focus to it, how could i inject the native control into there so I could use its .focus() method? Any other way that would fit my situation would be good too.

Thanks in advance!

Answer 1

I solved it by using the blur event on the input itself and checking if the control status is Invalid, from inside the custom control component and not the custom validator Fn:

in.html:

   <input #oinput (blur)="checkValidation()">

and in.ts:

export class GenericInputComponent implements OnInit, ControlValueAccessor {
...
@ViewChild('oinput', { static: false }) oinput: ElementRef;
...
constructor(
  @Optional()
  @Self()
  public controlDir: NgControl
} (
  this.controlDir.valueAccessor = this;
  )
...
checkValidation() {
 if (this.controlDir
     && !(this.controlDir.control.valid
     && (this.controlDir.control.touched 
     && !(this.controlDir.control.hasError('required'))))) {
         this.oinput.nativeElement.focus();
 }
}