时间戳

首页 > 解决方案 > 绑定来自云 Firestore 的 Angular 表单输入字段值

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

问题描述

我正在使用 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;
    }); 
}

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

标签： angularfirebase

解决方案

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

  • 模板驱动，大部分与表单相关的代码都写在 Angular 模板文件（HTML 文件）中；
  • reactive，表单的逻辑位于组件（TypeScript 文件）内部，并允许您利用 RxJS observables 进行更轻松的操作。

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

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

例如，如果您有

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

那么你需要做的是

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

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

推荐阅读