Question

我正在尝试获取一个异步验证器，仅在onblur且布尔值为true时才触发。

我认为我可以通过将updateOn args转换为数组并添加第二个对象来使其工作，例如：

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' ...

绑定this以获得您正在使用的布尔值，以获取正确的this。

然后将异步验证器应用于您的用例：

import { of } from 'rxjs';

// ....

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

角异步验证器“ updateOn”和特定条件

2 个答案: