ERROR TypeError: Cannot read property 'push' of undefined in Angular 5

Question

Getting error on when addAdd() call from html template.

this.personalForm = this.fb.group({
        user: this.fb.group({
            address: this.fb.array([this.addRows()])     
            }),
addRows() {
  return this.fb.group({
    country: ['']});

addAdd() {
  const control:FormArray = this.personalForm.get[`address`] as FormArray;
  control.push(this.addRows());
}

Where i am doing wrong

ERROR TypeError: Cannot read property 'push' of undefined

html code

<button (click)="addAdd()">Add Address</button>
 <div formArrayName="address">
    <div *ngFor="let add of personalForm.controls?.address?.controls; let i=index" [formGroupName]="i">
    <label>Country</label>
  <input type="text" class="form-control"   formControlName="country" 
  placeholder="Country" />
 </div> 
</div>

Sajeetharan · Accepted Answer · 2018-03-25 18:30:37Z

1

In this case control might be null, add a check for null and length.

const control:FormArray = this.personalForm.get[`address`] as FormArray;
if(control && control.length >0){
  control.push(this.addRows());
}

answered Mar 25, 2018 at 18:30

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

AniketGole Over a year ago

failed in compilation

AniketGole Over a year ago

its my bad working ! grate thanks, and i want to add into arrays but its just replacing with 1 single array every time i click

displayName · Accepted Answer · 2018-03-25 18:36:56Z

1

get is a function, not an object. Also, you must specify full path to your control.

const control:FormArray = this.personalForm.get(['user', 'address']) as FormArray;

or

const control:FormArray = this.personalForm.get('user.address') as FormArray;

answered Mar 25, 2018 at 18:36

displayName

1,1062 gold badges17 silver badges42 bronze badges

1 Comment

AniketGole Over a year ago

This is working ! superb also incrementing FormArray

AniketGole · Accepted Answer · 2018-03-25 18:48:41Z

0

Thanks Marko ! this is working, cool !

addAdd() {
    const control:FormArray = this.personalForm.get('user.address') as FormArray;  
    control.push(this.addRows());  
  }

answered Mar 25, 2018 at 18:48

AniketGole

1,3152 gold badges17 silver badges28 bronze badges

Collectives™ on Stack Overflow

ERROR TypeError: Cannot read property 'push' of undefined in Angular 5

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related