1

我正在寻找初始化表单上的某些表单字段，然后调用一个if(this.form.valid)有条件的函数。

在ngOnInit函数上，我有一个 API 调用，它获取一些基本信息并将其填写在表单上：

ngOnInit(){
    this.apiService.getInfo(this.user.id).subscribe(
        userInfo => {
            this.formModel.fieldA = userInfo.A; 
            this.formModel.fieldB = userInfo.B; 
            this.formModel.fieldC = userInfo.C; 
            this.doStuff();
        }
    );
}

但是，当调用this.doStuff()表单无效时，即使没有错误并且单击提交按钮似乎会强制验证并使其有效。

有没有一种方法可以手动触发表单的验证，从而实现这一点valid？

编辑：堆栈闪电战。

4

1 回答 1

2

Angular 模板驱动的表单实际上是异步的。NgForm与反应形式相比，在组件中使用指令时，这一点更为突出。如果您要从stackblitz 中将debuggera放入您的calc()函数中：

您会calc在调用 from 的函数OnInit中看到表单无效，表单控件也没有任何值：

在此处输入图像描述

所以你if的calc()：

if (this.formExample && this.formExample.valid)

is nottruthy也result不会被计算，因为形式 is not valid。

因此，如果我们在调用之前稍等片刻calc()，应该可以解决您的问题：

this.getInfo().subscribe(
  info => {
    this.params.field1 = info.field1;
    this.params.field2 = info.field2;
    // wait a tick!
    setTimeout(() => {
      this.calc();
    })
  }
);

堆栈闪电战

于 2019-09-21T09:17:21.800 回答