Angular8 reactive form fetch only filled controls

Question

I am using Angular Reactive Form as shown below

  'storeName': [''],
  'statusId': [''],
  'storeAddress': this._formBuilder.group({
    'address': [''],
    'county': [''],
    'landmark': [''],
  }),

When I submit the form, for empty controls I still get field with empty string.

Is it possible to get the final value object with only those fields which contain some value in it?

Write your own custom recursive-self-calling function that will clear every empty field. — Sergey, Jun 19 '19 at 18:51
@Sergey this is just a snippet and at many time my object even goes for 4 levels of nesting, it won't be the best way for it. — Varun Sukheja, Jun 19 '19 at 18:54
take a look at this https://stackoverflow.com/questions/2549320/looping-through-an-object-tree-recursively — ysf, Jun 19 '19 at 19:35

score 0 · Answer 1 · answered Jun 19 '19 at 19:35

  getNotNull(data:any):any
  {
    let notNull={}
    for (let key in data) {
      if (Array.isArray(data[key])) {
        let tmpArray=[]
        for (let i = 0; i < data[key].length; i++)
        {
          let tmp=this.getNotNull(data[key][i])

          if (typeof(tmp)!='object' || Object.keys(tmp).length)
            tmpArray.push(tmp)
        }
        if (tmpArray.length)
           notNull[key]=tmpArray;
      }
      else {
        if (typeof (data[key]) == "object")
        {
          let tmp=this.getNotNull(data[key]);
          if (typeof(tmp)!='object' || Object.keys(tmp).length)
            notNull[key]=tmp
        }
        else
        {
          if (data[key] || data[key]===0) //if you want to save 0 value
            notNull[key]=data[key]
        }
      }
    }
    return notNull
  }

Angular8 reactive form fetch only filled controls

1 Answers1