Блог

Главная - Вопросы по программированию - Как установить фокус на элемент управления, который не прошел проверку изнутри функции validator?

Как установить фокус на элемент управления, который не прошел проверку изнутри функции validator?

#javascript #angular #typescript #angular-reactive-forms

#javascript #angular #typescript #angular-reactive-forms

Вопрос:

У меня есть пользовательская функция проверки следующим образом:

 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 amp;amp; (isNaN(tempVal) || tempVal < min || tempVal > max)) {
        control.setValue('');
        return { 'numRange': true };
    }
    return null;
};
}

как вы можете видеть внутри, я устанавливаю значение элемента управления в » (пустое), когда он не проходит проверку.
Я также хотел бы установить фокус на нем, как я мог бы внедрить туда собственный элемент управления, чтобы я мог использовать его .focus() метод? Любой другой способ, который соответствовал бы моей ситуации, тоже был бы хорош.

Заранее спасибо!

Комментарии:

1. Может ли это вам помочь? coryrylan.com/blog/focus-first-invalid-input-with-angular-forms

2. спасибо, в конце концов я сделал кое-что еще.

Ответ №1:

Я решил это, используя blur событие на самом входе и проверяя, является ли статус элемента управления недопустимым, изнутри пользовательского компонента управления, а не пользовательского валидатора Fn:

в .html:

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

и в .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
     amp;amp; !(this.controlDir.control.valid
     amp;amp; (this.controlDir.control.touched 
     amp;amp; !(this.controlDir.control.hasError('required'))))) {
         this.oinput.nativeElement.focus();
 }
}