CODEWITHSUNDEEP
javascriptangulartypescriptangular-forms
Faisal Amdani
Faisal Amdani

Reputation: 109

Empty values are not submitting in Angular 4 form

I working on Angular 4 project. I am using smart table and form in it.

<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>

On edit button of table the form is open and shows the whole data of that row in that form, similar form button will be open on add new data in which the data should be added but if I enter only one data and submit it it does not add it it requires all fields.

The add function is as follows:

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']);

    }

The addNewEnquiry function in service is as follows:

 addNewEnquiry(data) 
{

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

}

When I enter all fields it added it to the firebase but when I doesn't fill all fields it shows me error.

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

Upvotes: 0

Views: 994

Answers (2)

Pramod Patil
Pramod Patil

Reputation: 2763

Before inserting it into your list, you can eliminate undefined ones from object.

  addNewEnquiry(data) 
 {
    var newData = data.filter(resp=>{
      if(resp.firstName && resp.lastName) {
        return resp;
     }
    })
   this.af.list('/enquirydata/').push(newData);

 }

Upvotes: 0

Pterrat
Pterrat

Reputation: 1710

When you want to push an object into Firebase, you can't have values of the properties equals undefined. Firebase accepts value or null only. Else you always show this error.

In your case :

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

To resolve your issue : 

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

Upvotes: 1

Related Questions