初始化后如何将验证器设置为 FormGroup答案

【问题标题】：How to setValidators to FormGroup after its initialization初始化后如何将验证器设置为 FormGroup
【发布时间】：2017-12-18 11:28:35
【问题描述】：

我有这个表单组

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时错误消失...

【问题讨论】：

你能创建一个 plunkr 吗？您的 validateId 方法是否位于单独的 ts 文件中？
您显然在某处失去了对“this”的引用
查看更新。我会尝试创建一个 plunkr
我创建了 plunker。请参阅更新 2。

标签： angular validation angular5

【解决方案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

【讨论】：