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?

Answer 1

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');

Answer 2

This did the trick for me:

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

Answer 3

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

Answer 4

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");

Answer 5

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.

Answer 6

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.