remove empty object value from reactive form valueChanges

Question

I have reactive form in angular application. I subscribe to it with valueChanges and before get the result of subscribe method, want to filter this object with rxjs filter or some similar method to get only not empty feald of form. How can I solve this?

this.form.valueChanges.pipe(
     debounceTime(500),
     filter(formObj => {
     // code that remove empty object values
     })
).subscribe(val => {
  // val example `{fullName: "name", dateOfBirthday: "", phoneNumber: "", fullAddress: ""}`       
});

refer this one may help you: stackoverflow.com/questions/38521648/… — Soumya B. Athani
– Soumya B. Athani, Commented Nov 5, 2018 at 8:51
so where's the problem? Instead of filter() you can use map() and change formObj to whatever you need. — martin
– martin, Commented Nov 5, 2018 at 9:29

KShewengger · Accepted Answer · 2018-11-05 09:58:32Z

3

Had created a Stackblitz Demo for your reference

You can somehow implement it like this:

filterEmptyFields(data: any): any {    // Filter any fields that aren't empty & store in a new object - To be passed on the Pipe map's caller
    let fields = {};
    Object.keys(data).forEach(key =>  data[key] != '' ? fields[key] = data[key] : key);

    return fields;   
}

trackEmptyFields(): void {
    this.form
      .valueChanges
      .pipe(map(this.filterEmptyFields))
      .subscribe(fields => console.log(fields));    
}

Output from the Stackblitz Demo

edited Nov 5, 2018 at 9:58

answered Nov 5, 2018 at 9:53

KShewengger

8,3293 gold badges27 silver badges38 bronze badges

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

1 Comment

Bogdan Tushevskyi Over a year ago

Or you can use ' Object.keys(data).forEach((key) => (!data[key]) && delete data[key]);' if your values can be empty or 'null' or 'undefined'

Collectives™ on Stack Overflow

remove empty object value from reactive form valueChanges

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related