在新的

Question

我有一个自定义控件/组件，例如，我以ReactiveForms样式将异步验证器挂接到

this.myform = new FormGroup({
  mycontrol : new FormControl('', [], this.myvalidator.bind(this)),

如果我在myvalidator函数上遇到问题，可以看到它被多次调用，主要时间在“ new FormControl”上，然后在为控件分配值时再次调用。

通过对验证的响应进行硬编码，例如：

return of({ error: 'done broke...'});

该控件在其“错误”对象中接收到错误，并且UI显示“ ng-invalid”类。都很好。

实际上，我的验证器需要知道我们要验证的控件，以便从服务中获得正确的响应。为此，我有一个名为“ getControlName（control）”的方法，该方法使用control.parent查找当前控件的名称（笨拙，但现在可以使用）。

问题是！在传递验证器的FormControl实例化时，实际上似乎触发了myvalidator函数，此时control.parent未定义。因此，我只是简单地添加了对control.parent的检查，并在没有检查时返回（null）...除外，这是行不通的。

如果验证器函数如下所示：

testVal(control: AbstractControl): Observable<{}> {
  if (!control.parent) { 
    return of(null); 
  } else {
    return of({ error: 'there is a parent this time' });
  }

然后我在控件的错误对象上收到一个错误，并且在类列表中设置了ng-invalid。太好了！

但是如果我的方法看起来像这样：

  testVal(control: AbstractControl): Observable<{}> {
  if (!control.parent) { return of(null); }

    const field = this.getControlName(control);
    const r = this.myservice.validate(field).
... service stuff ...
    return r; // this is the Observable from my service method

}

然后我在我的错误对象上遇到了一个错误，但是ng-valid类仍然存在！

为什么会有区别，我在这里做错了什么？

谢谢：）