Patch value not working with nested inputs Reactive forms Angular 5

Question

I'm working with Angular 5 and reactive forms, mi form is been created dynamically with a JSON that is been provided by the backend, there are some special inputs that are nested 3 levels and it works great with radio buttons but when the inputs are group of nested checkbox the patch value do not change the value of the checkboxes, this an example of mi structure

this.cvForm = this._fb.group({
  name: ['', [Validators.required]],
  lastname: ['', [Validators.required]],
  nested: this._fb.group({
    level1: this._fb.group({
       level2: this._fb.group({
          level3: this._fb.group({
             checkbox: [false, Validators.required]
         })
       })
     }),
   }),
 });
}

 this.cvForm 
    .get([
      'nested',
      this.nested,
      'level1',
      this.level1,
      'level2',
      this.level2,
      'level3',
      this.level3,
      'components',
      checkbox
    ]).patchValue({ checked: setValue });

EDIT:

I've been doing a lot of test with examples that you guys provide and I appreciate all your help. But I saw that the patch value it's not saving o changing the value at first click, when I click the checkbox once the view changes but the value in the form is still false and the second click on the checkbox set value to true in the form, but the view is changed so, basically the patch value and set value are setting the value till the second click in the form. And I have no idea why is that happening.

I edit the code, @SachinGupta and I add the patch line, that is how are we using the patch value. — GeekDev
– GeekDev, Commented Dec 3, 2018 at 15:26
@GeekDev, I've updated my answer. Please check to see if that works for you. — SiddAjmera
– SiddAjmera, Commented Dec 3, 2018 at 17:41

GeekDev · Accepted Answer · 2018-12-13 20:12:22Z

2

After several hours of research and testing I found that reactive forms in angular does not support the object.property syntax to set the value for depth level values, instead I did this:

this.cvForm.controls['nested'].controls['level1'].controls['level2'].controls['level3'].controls['checkbox'].value['checked'] = newValue;

That fix my problem, thanks guys for the help.

answered Dec 13, 2018 at 20:12

GeekDev

4505 silver badges19 bronze badges

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

Comments

Sachin Gupta · Accepted Answer · 2018-12-03 15:37:26Z

1

You only need to pass the string array which will give you the FormControl that you are looking for.

this.cvForm 
.get([
  'nested',
  'level1',
  'level2',
  'level3',
  'checkbox'
]).patchValue(setValue)

this should work for you. You dont need to pass an object to patchValue as this is a single formControl. You would need to pass object if you are patching values for multiple form controls in a single FormGroup.

answered Dec 3, 2018 at 15:37

Sachin Gupta

5,3493 gold badges19 silver badges33 bronze badges

Comments

SiddAjmera · Accepted Answer · 2018-12-03 17:40:47Z

1

Since you're only concerned about setting the value of the checkbox, please consider using patchValue.

And instead of getting the exact FormControl either by calling the get method on the FormGroup or by doing what you've done can be error-prone in case of nested FormGroups.

A simpler way would be to create an Object value that matches the structure of the form and then set the value that you want to set.

Here, give this a try:

setValue: boolean = true;
...
this.cvForm.patchValue({
  nested: {
    level1: {
      level2: {
        chekbox: setValue
      }
    }
  }
});

Here's a Working Sample StackBlitz for your ref.

edited Dec 3, 2018 at 17:40

answered Dec 3, 2018 at 15:31

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Comments

stringnome · Accepted Answer · 2020-10-31 23:18:04Z

0

if you are looking for how to update the checkbox value, try this way (useful for future similar searches)

My Form structure

changing the checkbox value

this.form.controls.completed['controls'].completed.value = MyBooleanValueHere;

answered Oct 31, 2020 at 23:18

stringnome

2331 gold badge7 silver badges15 bronze badges

Comments

J. Knabenschuh · Accepted Answer · 2018-12-03 15:32:01Z

-1

Check this out https://stackblitz.com/edit/angular-hqjny3 it worked for me

this.cvForm.patchValue({
  nested: {
    level1: {
      level2: {
        level3: {
          chekbox: true|false
        }
      }
    }
  }
});

answered Dec 3, 2018 at 15:32

J. Knabenschuh

7654 silver badges15 bronze badges

3 Comments

Sachin Gupta Over a year ago

You are patching multiple levels of FormGroup using that object. The OP only wants to patch value for a single control.

J. Knabenschuh Over a year ago

Yeah I see, the question got an update. But i do nearly the same with the following lines:

get checkboxControl() {return this.cvForm.controls['nested'].controls['level1'].controls['level2'].controls['level3'].controls['checkbox'];}

but of course via get it's much smarter.

Sachin Gupta Over a year ago

Sorry, didn't see your stackblitz code. Only the answer given here

Collectives™ on Stack Overflow

Patch value not working with nested inputs Reactive forms Angular 5

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related