Cannot read property 'data' of undefined-using patchValue in sub formArray

Question

I tried to render the cat_name dynamically by selecting the select box. but i am not able the render the cat_name by using the patchValue. Below is my code to render the sub formArray.

By selecting the select box using change event i got the firstname based on value i have filter the json array and i got particular formarray.

It having the data formArray i tried to render the cat_name while selecting the select box but i am not getting. Below is my code

selectarch(cat){

this.test=this.users.filter(data =>data.firstname === cat.target.value);

let arr = <FormArray>this.myForm.controls.users;

arr.controls[0].patchValue({firstname:this.test[0].firstname,lastname:this.test[0].lastname,street:this.test[0].street});

let arr2 = <FormArray>this.myForm.controls.users[0].data;
arr2.controls[0].patchValue({cat_name:this.test[0].data[0].cat_name});

}

<select (change)="selectarch($event)">
<option>Select</option>
<option [value]="res.firstname" *ngFor="let res of users">{{res.firstname}}</option>
</select>

Below is my CODE URL CODE URL

Below is json users array.

users = [ { "firstname": "ramu", "lastname": "mothukuri", "city": "chennai", "street": "ramu sivan koiil street", "pin": "600024",
  "data":[{"cat_id":"1","cat_name":"yyy","category":"rrr"},{"cat_id":"2","cat_name":"zzz","category":"222"}] },
  { "firstname": "ravi", "lastname": "mothukuri", "city": "chennai", "street": "ravi sivan koiil street", "pin": "600024","data":[{"cat_id":"1","cat_name":"ddd","category":"aaa"},{"cat_id":"2","cat_name":"aa","category":"333"}] },
  { "firstname": "manu", "lastname": "mothukuri", "city": "chennai", "street": "manu sivan koiil street", "pin": "600024","data":[{"cat_id":"1","cat_name":"jjj","category":"999"},{"cat_id":"2","cat_name":"bbb","category":"666"}] }
  ]

Arun Kumaresh · Accepted Answer · 2018-01-30 15:28:17Z

2

you should get the data formarray to patch the value of cat_name

try this

const users = this.myForm.get(['users', 0, 'data']) as FormArray;

users.controls[0].patchValue({cat_name:this.test[0].data[0].cat_name});

Working example

answered Jan 30, 2018 at 15:28

Arun Kumaresh

6,2966 gold badges36 silver badges50 bronze badges

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

Comments

sabithpocker · Accepted Answer · 2018-01-30 13:43:41Z

0

let users = <FormArray>this.myForm.get('users');
// users is the FormArray as I understood from your code
users.at(0).get('data').patchValue({cat_name:this.test[0].data[0].cat_name});
// at(0) will give the formGroup at index 0 of formArray
// get('data') to get formControl of formGroup

Your formGroup is like:

this.fb.group({
    users: this.fb.array([fb.group({
                firstname: this.users[0].firstname,
                lastname: this.users[0].lastname,
                street: this.users[0].street,
                data: dataArr
    })])
})

edited Jan 30, 2018 at 13:43

answered Jan 30, 2018 at 13:37

sabithpocker

15.6k1 gold badge44 silver badges77 bronze badges

4 Comments

Ramu Over a year ago

Hi Sabithpocker, i have changed the change event but its not working below is the code(app.component.ts) --selectarch(cat){ this.test=this.users.filter(data =>data.firstname === cat.target.value); let arr = <FormArray>this.myForm.controls.users; arr.controls[0].patchValue({firstname:this.test[0].firstname,lastname:this.test[0].lastname,street:this.test[0].street}); let arr2 = <FormArray>this.myForm.get('users'); arr2.at(0).get('data').patchValue({cat_name:this.test[0].data[0].cat_name}); }

Ramu Over a year ago

My code URL is stackblitz.com/edit/…

Ramu Over a year ago

Hi Sabithpocker, please help on this i tried but not getting

Ramu Over a year ago

showing error like this:ERROR TypeError: value.forEach is not a function at FormArray.patchValue in command line

Collectives™ on Stack Overflow

Cannot read property 'data' of undefined-using patchValue in sub formArray

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related