使用 Firebase 数据库关闭切换时，带有切换复选框的表单不会提交

Question

我有一个简单的表单，其中包含一个拨动开关。当我启用开关时它可以工作，但是当我关闭它时，表单将不会提交。这是我的模板代码

 <clr-toggle-container>
      <clr-toggle-wrapper>
      <input type="checkbox" clrToggle [(ngModel)]="pocTimesheetRequired" name="pocTimesheetRequired"/>
        <label>Timesheet Required</label>
      </clr-toggle-wrapper>
    </clr-toggle-container>

这是我的 ts 文件

  pocTimesheetRequired: boolean;

  onSubmit() {
    // tslint:disable-next-line:no-unused-expression
    if (this.name) {
       this.afs.collection('agencies').add(
        {
          // agencyId: this.agencyId,
          name: this.name,
          phone: this.phone,
          pocTimesheetRequired: this.pocTimesheetRequired
          // logoUrl: this.logoUrl,
          // benefitCardPhotoUrl: this.benefitCardPhotoUrl

        });
    }
  }

当我关闭开关时，出现如下错误：

Function addDoc() called with invalid data. Unsupported field value: undefined (found in field pocTimesheetRequired in document agencies/XwIQmDrnj8ciZST0GmdM).

我觉得我遗漏了一些应该很明显的东西，但是尽管我已经查看了文档并到处寻找答案，但我还是想不通。

Answer 1

错误信息为您提供了原因：

Unsupported field value: undefined (found in field pocTimesheetRequired...)

将数据发送到 firestore 时，意思是 this.pocTimesheetRequired 是 undefined。

除非与之交互，否则表单控件通常不会更改模型值。由于 this.pocTimesheetRequired 在初始化期间为 undefined，因此在用户单击复选框之前它一直未定义。

要解决此问题，我建议您为其设置默认值或在提交时替换它：

解决方案 1：

pocTimesheetRequired = false;

解决方案 2：

phone: this.phone,
pocTimesheetRequired: this.pocTimesheetRequired || false 
// logoUrl: this.logoUrl,

您也可以使用 ?? false 代替 || false。

使用 Firebase 数据库关闭切换时，带有切换复选框的表单不会提交

form with toggle checkbox doesn't submit when toggle is off using Firebase database

firebase

angular

vmware-clarity