How to setValue of a particular field in Reactive Forms when its an array of objects?

Question

I have a Dynamic Field being generated that can be n numbers in length. I would like to set the value of a particular field from the TS.

My Form initializing is like:

this.Form = this.fb.group({
      dynamics: this.fb.array([]),
    });

My Json looks like:

    { "dynamics": 

[ { "field": "Country", "operator": "", "value": "", "value2": "", "andOr": "", "date": "2021-10-04T16:11:57.965Z" }, 

{ "field": "", "operator": "", "value": "", "value2": "", "andOr": "", "date": "2021-10-04T16:19:18.835Z" } ] 

}

I would like to set the value of "value" field from TS.

I tried with this.Form.get('dynamics')[0].get('value').setValue(result); but that did not work.

How can I access the element in the dynamics array and then set the value?

Thanks in advance.

Meqwz · Accepted Answer · 2021-10-04 16:42:34Z

3

For clairity, I would first create a getter:

  get dynamics(): FormArray {
    return this.Form.get('dynamics') as FormArray;
  }

And then you want to use at and patchValue:

this.dynamics.at(0).patchValue({value: result})

With setValue you have to set the values for all of the properties of the form array object. patchValue lets you patch just one or more.

answered Oct 4, 2021 at 16:42

Meqwz

1,50111 silver badges16 bronze badges

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

2 Comments

Eliseo Over a year ago

you can also use this.dynamics.at(0).get('value').setValue(result) or even this.Form.get('dynamics.0.value').setValue(result)

Meqwz Over a year ago

You could, I guess it's the old concision vs readability argument.

Venkatesh K · Accepted Answer · 2021-10-04 18:39:21Z

3

You can easily set the value in html by making use of the index. Use the value tag and set the value in html as described below.

    <div formArrayName="dynamic" *ngFor="let dynamic of dynamics.controls; let i = index;">
   <div class="form-group col-md-2">
      <label>Value</label>
        <!-- Use the value tag, and set the value in your form-->
      <select   [value]="dynamics.at(i).controls.dynamic.value" formControlName="value">
      </select>
   </div>
</div>

answered Oct 4, 2021 at 18:39

Venkatesh K

1531 gold badge1 silver badge11 bronze badges

1 Comment

Meqwz Over a year ago

The question was about setting the value from the component, not the template.

Collectives™ on Stack Overflow

How to setValue of a particular field in Reactive Forms when its an array of objects?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related