Empty values are not submitting in Angular 4 form

Question

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

ERROR Error: Reference.push failed: first argument contains undefined in property 'enquirydata.lastName' — Faisal Amdani
– Faisal Amdani, Commented Feb 13, 2018 at 9:08
but i don't want to add last name then also it should add, and its happening for every other field — Faisal Amdani
– Faisal Amdani, Commented Feb 13, 2018 at 9:12

Pterrat · Accepted Answer · 2018-02-13 09:27:15Z

1

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

answered Feb 13, 2018 at 9:27

Pterrat

1,72012 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Faisal Amdani Over a year ago

where should I do this

Pterrat Over a year ago

in your form component

Pterrat Over a year ago

The same error? Could you give me the data result before sending into firebase?

Pramod Patil · Accepted Answer · 2018-02-13 11:51:25Z

0

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

 }

answered Feb 13, 2018 at 11:51

Pramod Patil

2,7632 gold badges16 silver badges20 bronze badges

Collectives™ on Stack Overflow

Empty values are not submitting in Angular 4 form

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related