CODEWITHSUNDEEP
angulartypescriptangular5
AniketGole
AniketGole

Reputation: 1285

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

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>

Upvotes: 0

Views: 830

Answers (3)

AniketGole
AniketGole

Reputation: 1285

Thanks Marko ! this is working, cool !

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

Upvotes: 0

displayName
displayName

Reputation: 1106

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;

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222582

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());
}

Upvotes: 1

Related Questions