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: https://stackoverflow.com/questions/38521648/remove-empty-objects-from-array — Soumya B. Athani, Nov 05 '18 at 08:51
so where's the problem? Instead of `filter()` you can use `map()` and change `formObj` to whatever you need. — martin, Nov 05 '18 at 09:29

KShewengger · Accepted Answer · 2018-11-05T09:58:32.763

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 05 '18 at 09:58

answered Nov 05 '18 at 09:53

KShewengger

7,853
3
24
36

1

Or you can use ' Object.keys(data).forEach((key) => (!data[key]) && delete data[key]);' if your values can be empty or 'null' or 'undefined' – Bogdan Tushevskyi Nov 05 '18 at 13:56

remove empty object value from reactive form valueChanges

1 Answers1