初始化后如何将Validators设置为FormGroup

Question

我有这个 FormGroup

defaultIdNumberValidator = [Validators.required, Validators.minLength(6),
    Validators.maxLength(11)];

this.registerForm = this.formBuilder.group({ 
  permissions: this.formBuilder.group({
    country: ['', [Validators.required]],
    identityNumber: [null, this.defaultIdNumberValidator],
  }, {validator: [this.validateId]}) 
});

我想根据 this.validateId 方法中的某些条件清除验证器并将其添加到 identityNumber。

validateId(input: AbstractControl) {
  if(condition) {
    input.get("identityNumber").clearValidators(); //this is working
  }
  if(condition) {
    input.get("identityNumber").setValidators(this.defaultIdNumberValidator); //not working
  }
}

当调用 setValidators 方法时出现此错误（第 109 行是调用 setValidators 的行）

ERROR TypeError: Cannot read property 'defaultIdNumberValidator' of undefined
    at RegisterComponent.validateId (register.component.ts:109)
    at eval (forms.js:742)
    at Array.map (<anonymous>)
    at _executeValidators (forms.js:742)
    at eval (forms.js:694)
    at eval (forms.js:742)
    at Array.map (<anonymous>)
    at _executeValidators (forms.js:742)
    at eval (forms.js:694)
    at eval (forms.js:742)

更新：

我重新启动开发服务器，现在我收到这个错误

ERROR TypeError: Cannot read property 'setValidators' of undefined
at RegisterComponent.validateId (register.component.ts:109)
at eval (forms.js:742)
at Array.map (<anonymous>)
at _executeValidators (forms.js:742)
at eval (forms.js:694)
at eval (forms.js:742)
at Array.map (<anonymous>)
at _executeValidators (forms.js:742)
at eval (forms.js:694)

更新 2：

我创建了简单的 plunker 来重现错误。如果您先单击输入然后单击其他地方，则会在其下出现错误。因此，当输入值的长度 >= 2 时，应删除此错误，当 >= 5 时，应再次显示此错误。我也不知道为什么当输入值的长度为 3 而不是 2 时，错误会消失...

Answer 1

您需要 bind(this) 来保持 this 的上下文。您还需要使用 updateValueAndValidity 来更新验证器的更改。在那里我们还需要不发出事件，如果你是，这将循环直到你的浏览器崩溃。所以更改以下内容：

}, {validator: this.validateId.bind(this)})

验证器看起来像这样：

validateId(input: AbstractControl) {
  // ...
  if(...) {
    input.get("identityNumber").clearValidators();
    input.get("identityNumber").updateValueAndValidity({emitEvent:false, onlySelf:true});
  }
  if(...) {
    input.get("identityNumber").setValidators(this.defaultIdNumberValidator);
    input.get("identityNumber").updateValueAndValidity({emitEvent:false, onlySelf:true});
  }
}

你的PLUNKER

初始化后如何将Validators设置为FormGroup

How to setValidators to FormGroup after its initialization

validation

angular

angular5