小编vbi*_*nko的帖子

这是诀窍：

• 具有实现 ControlValueAccessor 接口的组件可用作自定义控件。
• 这个组件在一些反应式表单中用作 FormControl。
• 此自定义控件具有异步验证器。

问题：

ControlValueAccessor 接口中的方法 validate() 在值更改后立即调用，并且不等待异步验证器。当然，控制无效且待定（因为正在进行验证）并且主表单也无效且待定。一切正常。

但。当异步验证器完成验证并返回 null（意味着值有效）时，自定义控件将有效并且状态也变为有效，但父级仍然无效且处于挂起状态，因为值访问器的 validate() 没有再次调用。

我试图从 validate() 方法返回 observable，但主表单将其解释为错误对象。

我找到了解决方法：当异步验证器完成验证时，从自定义控件传播更改事件。它迫使主窗体再次调用 validate() 方法并获得正确的有效状态。但它看起来又脏又粗糙。

问题是： 需要做什么才能使父表单由子自定义控件的异步验证器管理？必须说它适用于同步验证器。

所有项目代码都可以在这里找到：https : //stackblitz.com/edit/angular-fdcrbl

主表单模板：

<form [formGroup]="mainForm">
    <child-control formControlName="childControl"></child-control>
</form>

主窗体类：

import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup } from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
  mainForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.mainForm = this.formBuilder.group({
      childControl: this.formBuilder.control("")
    });
  }
}

自定义子控件模板：

<div …