在 Angular 7 中初始化模板驱动表单

Question

我想初始化表单上的某些表单字段，然后调用一个具有 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 变为 true？

编辑：Stackblitz.

Answer 1

Angular 模板驱动的表单实际上是异步的。与响应式表单相比，在组件中使用 NgForm 指令时，这一点更为突出。如果您要从 stackblitz:

中将 debugger 放入 calc() 函数中

您会在 calc 函数中看到当从 OnInit 调用时显示表单无效，表单控件也没有任何值：

所以你的 if 在 calc():

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

不是 truthy 并且 result 不会被计算，因为表格不是 valid.

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

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

STACKBLITZ

在 Angular 7 中初始化模板驱动表单

Initializing Template Driven Form in Angular 7

angular

angular-forms

angular-template-form