patch Value in a nested form control using angular2

Question

I need to set a value in a nested control in a FormBuiler and the model is the following:

this.addAccForm = this.fb.group({
      accid: ['', Validators.required],
      status: '',
      cyc: this.fb.array([
        this.initCyc(),
      ])
    })

initCyc() {
      return this.fb.group({
        cycid: ['', Validators.required],
        name: ['', Validators.required],
        description: ['', Validators.required],
        status: ['', Validators.required],
        det: this.fb.group({
            dcycid: ['', Validators.required],
            status: ['', Validators.required]
        })
      })

I need to set a value cycid and also dcycid but I m stuck to it, I've tried to use the following line , but it does NOT help :

this.addAccForm.patchValue({cyc: { [0]: {cycid: 1234567 }}});

//

this.addAccForm.patchValue({cyc: { [0]: { det : {dcycid: 9876543}}}});

Any idea how it should be?

Worked

Answer 1

Here is how I solved my issue :

(this.addAccForm.controls['cyc'].at(0)).patchValue({cycid: 12345 });  
//
(this.addAccForm.controls['cyc'].at(0)).controls['det'].at(0).patchValue({dcycid: 9876543});

Thank you

Worked

that's code not work for me, I think version difference, I am using version ^6.0.0 – Borer

Answer 2

This did the trick for me:

this.addAccForm.patchValue({'cyc': {cycid: 1234567 }});

Nicholas

Answer 3

Try with theese codes

this.addAccForm.patchValue({cyc: {cycid: 1234567 }});

this.addAccForm.patchValue({cyc: { det : {dcycid: 9876543}}});

Another solution is:

(< FormGroup >this.addAccForm.controls['cyc']).controls['cycid'].patchValue('1234567');
(< FormGroup >this.addAccForm.controls['cyc']).controls['det'].controls['dcycid'].patchValue('1234567');

Celle

just give a try without any success. – Worked

Answer 4

Update

Updating nested fields of an Angular FormGroup looks cleaner using the get method, like this:

this.addAccForm.get('cyc.det.dcycid').patchValue(9876543);

And if for some reason you like the object syntax:

this.addAccForm.get('cyc.det').patchValue({ dcycid: 9876543 });

Repel

Answer 5

Here is the code for working for me.

I am using Angular Version "^6.0.0"

var formArray = this.addAccForm.get("cyc") as FormArray;
formArray.at(0)["controls"]["cycid"].patchValue("Value that you want to pass");

Borer

Answer 6

Clearly, this is an older entry, but that's how I handle similar situations

this.addAccForm.controls['cyc']['controls'][index].patchValue({cycid: '100'})

The syntax seems cleaner to me like this. However, one fairly easy approach to go through is by simply outputting the form.controls at first. That way you can see in the console what your form consists of and basically just observe its structure.

Pragmatics

Answer 7

Define a FormGroup to hold a form.
addAccForm: FormGroup

Create a form using FormBuilder.

this.addAccForm = this.fb.group({
    accid: ['', Validators.required],
    status: '',
    cyc: this.fb.array([])
})

Now create a method to patch the form values. You may pass the model as parameters to the method. Or a variable defined in the component class.

// GETER TO RETRIEVE THE CYC FORMARRAY
get cycFormArray(): FormArray {
    return this.addAccForm.get('cyc') as FormArray;
}

patchForm(model: any) {
   this.addAccForm.patchValue({
       accid: [model.accid, Validators.required],
       status: model.status,
   });

   // PASS ARRAY TO PATCH FORM ARRAY
   this.patchCyc(model.cyc);
}

// METHOD TO PATCH FORM ARRAY 
patchCyc(cycArray: any[]) {
    cycArray.forEach(item => {
        this.cycFormArray.push({
            this.fb.group({
               prop1: item.prop1,
               prop2: item.prop2,
               ...
            })
        })
    })
}

The patchCyc() method will loop through the array passed as parameter. A new FormGroup will be pushed to the cyc FormArray in each loop.

Bluey

Answer 8

nested form patchvalue you need to use Array after object like this:

this.userform.patchvalue({
 name: 'Ajay',
 approvers: [ {id:1} ]
})

Cursive