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

【问题标题】：Initializing Template Driven Form in Angular 7在 Angular 7 中初始化模板驱动表单
【发布时间】：2019-09-19 20:25:52
【问题描述】：

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

编辑：Stackblitz。

【问题讨论】：

this.form.updateValueAndValidity()
@joyBlanks 我收到“'NgForm' 类型上不存在属性 'updateValueAndValidity'”。
你能用一些虚拟数据使用({}).subscribe 来模拟apiservice
你的模板是什么样子的？
我添加了一个带有虚拟数据的 Stackblitz。

标签： angular angular-forms angular-template-form

【解决方案1】：

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

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

所以你的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

【讨论】：