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);
}

快速解释我的应用程序组件的事件顺序：我的路由模块中有一个Resolver，它从后端api获取MyModel数据。组件加载时，其模板的MyForm表单绑定到组件的“model”属性。调用NgOnInit（），我从路径中检索模型数据并调用initForm（）来设置model属性上的数据。然后我需要在表单上调用“markAsPristine（）”，因为表单现在很脏（即使模型本身还没有被用户触摸 - 这是我不理解的东西）。另外，我需要在某些控件上订阅valueChanges来监视特定的东西。

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

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

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

Answer 1

杰克。

你可以试试ngDoCheck生命周期钩子。

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

希望它有所帮助。

组件初始化后如何检测表单何时“准备就绪”

1 个答案: