Угловые асинхронные валидаторы updateOn и особые условия

Question

Я пытаюсь заставить асинхронный валидатор запускать только onblur, и если логическое значение истинно.

Я думал, что смогу заставить его работать, преобразовав аргументы updateOn в массив и добавив второй объект, например, так:

this.createOrganisation.addControl('address', this.ofb.group(
        {                
            addressPostcode: [null, { validators: [Validators.required], asyncValidators: [this.postCodeValidator], updateOn: [ 'blur', this.showAlert] }]

        }   
    ));

btw:

this.showAlert

имеет значение false.

У кого-нибудь есть идеи, как проверять только размытие, и если для этого логического значения установлено значение true?

Answer 1

updateOn принимает только 'change' | 'blur' | 'submit' строки и должно работать только с этими событиями, вы не можете заставить его работать, сделав его массивом.

Насколько я понимаю, решающим фактором добавленных валидаторов в вашем случае является флаг showAlert. Если только showAlert истинно только тогда, мы должны проверить, выполнять ли проверку события blur или нет. Если мое предположение верно, и вы не обновляете флаг showAlert во время события blur, то вы можете использовать этот подход.

Я устанавливаю элементы управления формы с валидаторами и без них в зависимости от состояния флага showAlert. Имейте его установщик / получатель как:

set showAlert(val) {
    this._showAlert = val
    this._modifyControl()
}

get showAlert() {
  return this._showAlert
}

private _modifyControl() {
  if (this.showAlert) {
    if (this.createOrganisation.get('addressPostcode')) {
      let controlValue = this.createOrganisation.get('addressPostcode').value
      this.createOrganisation.setControl('addressPostcode', new FormControl(controlValue, { validators: [Validators.required], asyncValidators: [this.postCodeValidator.bind(this)], updateOn: 'blur' }))
    }
    else {
      this.createOrganisation.addControl('addressPostcode', new FormControl(null, { validators: [Validators.required], asyncValidators: [this.postCodeValidator.bind(this)], updateOn: 'blur' }))
    }

  }
  else {
    if (this.createOrganisation.get('addressPostcode')) {
      let controlValue = this.createOrganisation.get('addressPostcode').value
      this.createOrganisation.setControl('addressPostcode', new FormControl(controlValue))
    } else {
      this.createOrganisation.addControl('addressPostcode', new FormControl(null))
    }

  }
}

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

Внимание: 1. Не обновляйте флаг в случае размытия. 2. Если Falg обновляется, когда пользователь печатает в поле ввода, он теряет фокус с ввода по мере обновления элемента управления.

См. Пример здесь: https://stackblitz.com/edit/updateoncontrol?file=src/app/app.component.ts

Answer 2

Я бы посмотрел на это немного по-другому ... если бы асинхронный валидатор был "действителен", если логическая пропа false. Так что-то вроде этого:

... asyncValidators: [this.postCodeValidator.bind(this)], updateOn: 'blur' ...

Binding this для получения значения логического значения, которое вы используете, для получения правильного this.

Тогда асинхронный валидатор применим к вашему сценарию использования:

import { of } from 'rxjs';

// ....

postCodeValidator(control: AbstractControl) {
  if (!this.showAlert) { 
    return of(null)
  } else {
    // do your stuff...
  }
}