绑定来自云 Firestore 的 Angular 表单输入字段值

Question

我正在使用 Angular 和 firebase 后端服务。我已经实现了云火库功能。我正在尝试绑定数据库中的输入字段值。一切正常，但值不会反映在输入字段中。如果尝试控制台对象，它会正确返回值，但不会在输入字段中绑定。

<form [formGroup]="userForm" #userBusinessForm="ngForm">
    <div class="row">
        <div class="col-12">
            <div class="form-group">
                <label>Name Of Your Business</label>
                <input type="text" [(ngModel)]="businessData.businessName" formControlName="businessName" name="businessName" class="form-control">
             </div>
        </div>
    </div>
</form>

下面的方法我调用了 ngOnIt，它从服务中获取引用并正确生成输出

private getBusinessInfo(){
    this.db.singleBusinessInfo(this.businessID)
    .valueChanges()
    .subscribe(data =>{
      this.businessData = data;
      this.showSpinner = false;
    }); 
}

唯一的问题是值没有在输入字段中绑定，并且在控制台中也没有显示任何错误

Answer 1

您不应该混合使用 Angular 提供的两种创建表单的方法：

• template-driven，其中大部分与表单相关的代码都写在Angular模板文件（HTML文件）中；
• reactive，表单的逻辑位于组件（TypeScript 文件）内部，并允许您利用 RxJS 可观察对象更轻松地进行操作。

但是，这两者不能很好地混合在一起，就像框架的视图更新算法不能很好地与 jQuery 混合一样。你试图从两个地方控制同一件事，结果导致引擎盖下的一团糟，导致你面临意想不到的行为。

通过<form [formGroup]="userForm">，您选择了响应式方法，但通过[(ngModel)]="businessData.businessName"，您切换到了模板方法。查看您创建的userForm 对象（可能使用new FormGroup 或this.fb，其中fb 未注入FormBuilder），并找到您想要与输入字段绑定的字段名称风景。可能是businessName，但如果没有看到足够多的相关代码，我无法确定（这就是为什么您应该发布该问题的完整最小重现，而不是随机粘贴一大段代码）。

例如，如果你有

public userForm = this.fb.group({
  businessName: [''],
})

那么你需要做的是

<form [formGroup]="userForm">
  <input formControlName="businessName">
</form>

在模板中。 不是 ([ngModel]) 的东西；这就是模板驱动的方法。