Angular FormArray value as an array, not object

Question

I want to convert the values of "trackings" to an array. Right now, it prints an object. See below:

I need trackings to be an array: trackings: ['value','value']

Below my current code:

interface FormInterface {
  items: [{
    sku: string;
    quantity: string;
    received: string;
    trackings: Array < any > ;
  }];
  orderId: string;
  isPrime: boolean;
  reason: string;
}

addItemToForm() {
  const items = this.fb.group({
    sku: ['', Validators.required],
    quantity: ['', Validators.required],
    received: ['', Validators.required],
    trackings: this.fb.array([])
  });
  this.itemsForm.push(items);
}

addTrackingsToForm(control) {
  console.log(control);
  control.push(
    this.fb.group({
      trackings: [] as Array < any >
    })
  );
}

submitData() {
  console.log( < FormInterface > this.inputData.value);
  // this.returns.createReturn(this.inputData.value).subscribe(data => {
  //   this.returns.openSnackBar('Return Created!', '');
  //   this.inputData.reset();
  // });
}

Thank you for the help.

Your stackblitz was giving errors in console, I could not debug them... I created this: stackblitz.com/edit/… ... see if helps. — Ashish Ranjan
– Ashish Ranjan, Commented Sep 5, 2018 at 19:43

SiddAjmera · Accepted Answer · 2018-09-05 17:51:11Z

1

Your addTrackingsToForm is adding a FormGroup to the FormArray. It should be adding a FormControl instead. Change it to control instead of array in that case:

addTrackingsToForm(control) {
    console.log(control);
    control.push(
      this.fb.control()
    );
  }

answered Sep 5, 2018 at 17:51

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

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

5 Comments

Blinhawk Over a year ago

Hey. If I add control instead of group, then the tree changes: 'items -> 0 -> trackings -> 0 -> trackings' when it needs to be: items -> 0 -> trackings -> 0'

SiddAjmera Over a year ago

Would it be possible for you to create a Stackblitz?

Blinhawk Over a year ago

I tried, but the template does not want to work. If you want to take a look at the code: stackblitz.com/edit/…

SiddAjmera Over a year ago

I've literally spent an hour building such a form a few days back. You might want to have a look at it here: stackblitz.com/edit/angular-complex-reactive-form

Blinhawk Over a year ago

I will take a look at it. Thanks!

Collectives™ on Stack Overflow

Angular FormArray value as an array, not object

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related