綁定來自 Cloud Firestore 的角度表單輸入字段值

Question

我正在使用 Angular 和 firebase 后端服務。 我已經實現了雲 Firestore 功能。 我正在嘗試從數據庫綁定輸入字段值。 一切正常，但值不會反映在輸入字段中。 如果嘗試控制台對象，它會正確返回值，但不會在輸入字段中綁定。

<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 提供的用於創建表單的兩種方法：

• 模板驅動，其中大部分與表單相關的代碼都寫在 Angular 模板文件（HTML 文件）中；
• 反應性，其中對於所述形式邏輯是組分（打字稿文件）的內部，並允許杠桿RxJS觀測更容易操縱。

但是，這兩者不能很好地混合在一起，就像框架的視圖更新算法與 jQuery 不能很好地混合一樣。 你試圖從兩個地方控制同樣的事情，結果在引擎蓋下陷入了一個巨大的混亂，導致你面臨的意想不到的行為。

通過執行<form [formGroup]="userForm"> ，您選擇了反應式方法，但是通過執行[(ngModel)]="businessData.businessName"您切換到模板方法。 查看您創建的userForm對象（可能使用new FormGroup或this.fb ，其中fb是 injcted FormBuilder ），並找到要與視圖上的輸入字段關聯的字段的名稱。 它可能是businessName ，但如果沒有看到足夠的相關代碼，我無法確定（這就是為什么您應該發布問題的完整最小再現而不是隨機粘貼一大塊代碼）。

例如，如果你有

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

那么你需要做的是

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

在模板中。 不是([ngModel])東西； 這就是模板驅動的方法。