angular - 组件初始化后如何检测表单何时为 'ready'

Question

我怀疑我可能做错了什么，但问题是有时我需要在组件初始化和数据加载后进行 Form 或 FormControl 修补。我发现表单及其控件在 OnInit 或 AfterViewInit 生命周期阶段都没有完全初始化。

示例代码摘录:

@ViewChild('MyForm') form: NgForm; 
model: MyModel;

ngOnInit(): void {
    this.route.data.subscribe(
        data => {
            const model = data['model'];
            this.initForm(model);
        },
        err => console.error(err)
    );
}

private initForm(model: MyModel): void {
    this.model = model;

    setTimeout(() => {
        this.form.form.markAsPristine();
        const myCtrl = this.form.form.get('myCtrl');
        myCtrl.valueChanges.subscribe(value => {
            console.log(value);
        });
    }, 1000);
}

快速解释我的应用程序组件的事件顺序:我的路由模块中有一个解析器，它从后端 api 获取 MyModel 数据。组件加载后，其模板的 MyForm 表单绑定(bind)到组件的“model”属性。调用 NgOnInit() 后，我从路由中检索模型数据并调用 initForm() 在模型属性上设置数据。然后我需要在表单上调用“markAsPristine()”，因为表单现在是脏的(即使模型本身还没有被用户触及——顺便说一句，这是我不明白的)。另外，我需要订阅某些控件上的 valueChanges 以监视特定内容。

问题是，如果我不将该代码包装在 setTimeout() 函数中，则 markAsPristine() 和对表单内部控件的访问将不起作用。就好像表单还没有完全准备好，框架需要一些时间来设置它，然后我才能摆弄它。例如，如果没有 setTimeout，“this.form.form.get('myCtrl')”将返回 null。但是，在 1 秒延迟后，FormControl 确实存在并被返回。

有没有办法知道表单何时“准备好”？或者，我做错了什么吗？另请注意:我的模型非常复杂，并且具有嵌套对象、数组等。所以我想知道是否正是由于这种复杂性才导致表单的功能无法立即访问..？

顺便说一下，这是一个基于模板的表单，而不是响应式表单。

Answer 1

jack 。

您可以尝试 ngDoCheck 生命周期 Hook 。

ngDoCheck(): void {
  if (this.form) ....
}

希望有帮助。