Создание собственного валидатора formGroup с использованием внешних данных

Question

Я все еще изучаю Angular 2+ и Material2, поэтому, если бы вы могли включить некоторые фрагменты кода в свой ответ, я был бы признателен.

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

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

Вот некоторый код:

checkResult: boolean;

constructor(private http: HttpClient, private formBuilder: FormBuilder) {

  this.form = this.formBuilder.group({
    id: ['', Validators.required],
    configuration: this.formBuilder.array([])
  });
}


// Triggered when record is selected from table

viewRecord() {

  this.form = this.formBuilder.group({
    id: [formId, Validators.required, {validator: this.checkIdFn()}],
    configuration: this.formBuilder.array([])
  });
}

checkID(): boolean {
  //queries database
  result: boolean
  this.checkResult = result
}

checkIdFn = (control: FormGroup) => {
  return this.checkResult ? null : { valid: false };
}

Answer 1

id: [formId, [array of validators: Validators.required, MyValidator.something]],

MyValidator.something должен быть функцией (control: AbstractControl) -> ValidationErrors | null

MyValidator.something может быть вашей функцией класса, но было бы лучше, если бы вы создали функцию, которая возвращает этот валидатор (any) -> ValidatorFn

Например:

checkResult: boolean;

constructor(private http: HttpClient, private formBuilder: FormBuilder) {

  this.form = this.formBuilder.group({
    id: ['', [Validators.required, this._myValidator()]],
    configuration: this.formBuilder.array([])
  });
}

private _myValidator(): ValidatorFn {
  return (control: AbstractControl) => {
    return control.value && this.checkResult ? {error: 'error'} : null;
  }
}

Вы можете легко сделать асинхронный вызов внутри ValidatorFn и отложить результат проверки.