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.re         


        

Answer 1

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 2

This did the trick for me:

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

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

Answer 4

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.

Answer 5

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 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.