javascript - 空值不会以 Angular 4 形式提交

Question

我正在从事 Angular 4 项目。我正在其中使用智能表格和表单。

<div class="row">
  <div class="col-lg-12">
    <nb-card>
      <nb-card-header>Default Inputs</nb-card-header>
      <nb-card-body >
        <form #f="ngForm" (ngSubmit) = "addNewStudent(f)" >
        <div class="row full-name-inputs">
          <div class="col-sm-6 input-group">
            <input type="text" placeholder="First Name" class="form-control" name="firstName" [(ngModel)]="data.firstName" />
          </div>
          <div class="col-sm-6 input-group">
            <input type="text" placeholder="Last Name" class="form-control" name="lastName" [(ngModel)]="data.lastName" />
          </div >
            <div class="col-sm-6 input-group">
            <input type="text" placeholder="ID" class="form-control" name="id"[(ngModel)]="data.id" [required]=false />
          </div>
         <button type="submit" class="btn btn-primary">Submit</button>
        <button type="cancel" class="btn ">Cancel</button>

       </form>
      </nb-card-body>
    </nb-card>
      </div>
</div>

在表的编辑按钮上，表单打开并显示该表单中该行的全部数据，在添加新数据时将打开类似的表单按钮，其中应添加数据，但如果我仅输入一个数据并提交如果它不添加它，它需要所有字段。

添加函数如下:

addNewStudent(f: NgForm)
    {
    console.log(f.value);
    if(this.isAddPage)
       {
       this.service.addNewEnquiry(f.value);
       console.log("addenquiry");
       }
       else{
        this.service.editEnquiry(f.value);
       console.log("editenquiry");
       }
        this.router.navigate(['pages/dashboard1']);

    }

service中的addNewEnquiry函数如下:

 addNewEnquiry(data) 
{

    this.af.list('/enquirydata/').push(data);

}

当我输入所有字段时，它会将其添加到 firebase 中，但是当我没有填写所有字段时，它会显示错误。

ERROR Error: Reference.push failed: first argument contains undefined in property 'enquirydata.lastName

Answer 1

当您想要将对象推送到 Firebase 时，属性值不能等于未定义。 Firebase 仅接受值或 null。否则你总是显示这个错误。

就您而言:

{ id:undefined, lastName:undefined, firstName:undefined }

解决您的问题:

public data:any = { id:null, lastName:null, firstName:null };