Угловая асинхронная реактивная форма Валидация

Question

Я искал много учебных пособий, чтобы можно было реализовать асинхронные валидаторы для реактивной формы в угловых, но я всегда получаю ошибку.

Что мне нужно сделать, это проверить, что значение, записанное в поле, существует в массиве объектов, хранящихся в службе.

Проблема в том, что валидатор работает нормально, когда я выполняюсравнение с фиксированным значением, но когда я пытаюсь использовать сервис, он говорит, что сервис не определен.

Код для формы:

ngOnInit() {
 this.FormNuevaConf =this.fb.group({
  'codigo': [null,null],
  'valor': [null,null,this.valorUnicoValidator]
})}

Код для валидатора:

valorUnicoValidator (control: AbstractControl, service:UnidadesService): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
return of(service.subscribe(control) === control.value).pipe(
  map(result => result ? { invalid: true } : null)
  );}

subscribe(control) - это функция в службе, которая возвращает значение, если в массиве объектов, возвращенных из запроса db, найдено control.value.

Я не нашел четкого объяснения того, как создать асинхронный валидатор, если у вас есть такой, который вы можете мне порекомендовать, я буду благодарен.

Answer 1

Вы можете создать конструктор валидаторов, например, если у вашего компонента есть копия экземпляра службы, которую вы хотите.

myValidator.validator.ts:

export function MyValidator(service: MyService) {
    return (control: AbstractControl): { [key: string]: any } | null => {
        if (service.getValue()) {
            return { Error: true };
        } else {
            return null;
        }
    };
}

в вашем компоненте:

this.noteForm.addControl("MyFormContorl", new FormControl(null,
            [Validators.required, MyValidator(this.myService)])); 

Answer 2

Служба не может быть внедрена в валидатор, вы должны внедрить ее как приватную в конструктор класса вашего компонента , а затем использовать ее в валидаторе, поскольку у вас будет к ней доступ.

Что-то вроде:

constructor(private service: UnidadesService) {}

ngOnInit() {
  this.FormNuevaConf =this.fb.group({
    'codigo': [null,null],
    'valor': [null,null,this.valorUnicoValidator]
  })
}

valorUnicoValidator (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
    return of(this.service.subscribe(control) === control.value).pipe(
      map(result => result ? { invalid: true } : null)
);}