Send formArray as one object

Question

I am using mat-stepper single form for my stepper. when i do API call it sends data as an array of objects like this:

[ 
  { 
    "product": "lifeci", 
    "gender": "F", 
    "birthDate": "1999-04-23T10:58:53.839Z", 
    "payFrequency": 12, 
    "subLimit": "100"
  }, 
  { 
    "currency": "USD", 
    "amount": "15000", 
    "period": 3 
 }
]

I would like to send data as one object like this:

{ 
  "gender": "string", 
  "birthDate": "2021-04-23T11:37:01.738Z",
  "period": 0, 
  "payFrequency": 0, 
  "amount": 0, 
  "subLimit": "string", 
  "currency": "string",  
  "product": 0 
}

this is my form:

    this.formGroup = this._formBuilder.group({
      formArray: this._formBuilder.array([
        this._formBuilder.group({
          product: ['lifeci', Validators.required],
          gender: ['', Validators.required],
          birthDate: ['', [Validators.min(18), Validators.max(50)]],
          payFrequency: [12],
          subLimit: ['100']
        }),
        this._formBuilder.group({
          currency: ['USD', Validators.required],
          amount: ['15000', Validators.required],
          period: ['', Validators.required],
        }),
      ])
    });

      onSubmit() {
        this.service.calculate(this.formGroup.value).subscribe(
          (res:any)=>{
            console.log(res);
          },
          err => {
            console.log(err);
          }
        );
      }

service.ts

    export class LifeciService {
    
      readonly API_SERVER = "API_URL";
      constructor(private http: HttpClient) { }
    
      calculate(formData) {
        return this.http.post(this.API_SERVER + '/Calculate', formData);
        }
    
    
    }

how can i do it?

you should show us api service also.

tmsbrndz
– tmsbrndz

2021-04-23 12:33:19 +00:00
Commented Apr 23, 2021 at 12:33 — tmsbrndz
– tmsbrndz, Commented Apr 23, 2021 at 12:33
hi! i edited my post!

user15278332
– user15278332

2021-04-23 13:15:45 +00:00
Commented Apr 23, 2021 at 13:15 — user15278332
– user15278332, Commented Apr 23, 2021 at 13:15

Owen Kelvin · Accepted Answer · 2021-04-23 15:36:02Z

1

You can use a simple transformation using javascript reduce function to transform the data to the desired structure

const initial = [ { "product": "lifeci", "gender": "F", "birthDate": "1999-04-23T10:58:53.839Z", "payFrequency": 12, "subLimit": "100" }, { "currency": "USD", "amount": "15000", "period": 3 } ];

const reduced = initial.reduce((prev, next) => ({...prev, ...next}), {})
console.log(reduced)

In your case this can be implemented like below

      onSubmit() {
        const formArrayData = this.formGroup.get('formArray').value;
        const data = formArrayData.reduce((prev, next) => ({...prev, ...next}), {})
        this.service.calculate(data).subscribe(
          (res:any)=>{
            console.log(res);
          },
          err => {
            console.log(err);
          }
        );

edited Apr 23, 2021 at 15:36

answered Apr 23, 2021 at 12:34

Owen Kelvin

15.2k11 gold badges51 silver badges86 bronze badges

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

2 Comments

user15278332 Over a year ago

Thanks for the answer how can i implement this with my service? i did something like that but it doesnt work: onSubmit() { const initial = [this.formGroup.value]; const reduced = initial.reduce((prev, next) => ({...prev, ...next}), {}) console.log(reduced); this.service.calculate(reduced).subscribe( (res:any)=>{ console.log(res); }, ); }

Owen Kelvin Over a year ago

Use const initial = this.formGroup.get('formArray').value

Collectives™ on Stack Overflow

Send formArray as one object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related