Angular Form Array of object is not working

Question

// setup the form
const formGroup = {};
for (const prop of Object.keys(this.dataObject)) {
  try {
    const cpv = this.dataObject[prop].cpv;
    const value = this.dataObject[prop].value;
    formGroup['componentDetails'] = new FormArray([
      new FormControl({'cpv': cpv, 'value': value})
    ]);
  } catch (e) {
    console.log('Exception in Form setup - ' + e);
  }
}

I have the above code to set-up form control and form array for my form. The resulting JSON that is generated does not add value property :(

What I get:

"componentDetails": [ { "cpv": "CPV_1" } ]

What I need

"componentDetails": [ { "cpv": "CPV_1", "value": "test value" } ]

I do not see any errors. Was wondering if you anyone faced the same issue and how they solved it?

Well you are just creating one formcontrol, when you obviously need two. That's at least a problem on first glance :) — AVJT82
– AVJT82, Commented Nov 17, 2017 at 18:49
cpv and value have to go together as a pair when we submit the form...[{ 'cpv' : 'cpv1', 'value': 'test1'}, {'cpv': 'cpv2', 'value': 'test2'}] — David Jeyathilak
– David Jeyathilak, Commented Nov 17, 2017 at 19:45
@DavidJeyathilak Then you could create them as an object; check my edit — Milo
– Milo, Commented Nov 18, 2017 at 16:21
@AJT_82 I am trying this in another way at stackoverflow.com/questions/46781055/… — David Jeyathilak
– David Jeyathilak, Commented Nov 24, 2017 at 0:25

Milo · Accepted Answer · 2017-11-18 16:20:46Z

1

As @AJT_82 suggested value would have to be another FormControl:

formGroup['componentDetails'] = new FormArray([
  new FormControl({'cpv': cpv}),
  new FormControl({''value': value})
]);

EDIT: If they need to go as a pair:

const cpv = this.dataObject[prop].cpv;
const value = this.dataObject[prop].value;
let pair: any = { 'cpv': cpv, 'value': value };

formGroup['componentDetails'] = new FormArray([
    new FormControl(pair)
]);

See: https://angular.io/api/forms/FormArray

edited Nov 18, 2017 at 16:20

answered Nov 17, 2017 at 19:38

Milo

3,4539 gold badges32 silver badges44 bronze badges

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

Collectives™ on Stack Overflow

Angular Form Array of object is not working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related