ERROR TypeError: Cannot read property '0' of undefined when i add text field dynamiclly with angular2

Question

i'm using angular2 in My project, i'm trying to add text field dynamically but it gives me an error:

TS:

     ngOnInit() {
       this.myForm = this._fb.group({

        myArray: this._fb.array([
            this._fb.group({  
              this.initArray(),
            }), 

        ])
    });
 }
        initArray() {
      return  this._fb.group({  
            title: ['']
            })
}

addArray() {
    const control = <FormArray>this.myForm.controls['myArray'];
    //this.myGroupName.push(newName);
    control.push(this.initArray());

}

HTML:

 <div formArrayName="myArray"> 
                    <div *ngFor="let myGroup of myForm.controls.myArray.controls; let i=index" >
                    <div [formGroupName]="i"> 
                        <span *ngIf="myForm.controls.myArray.controls.length > 1" 
                                (click)="removeDataKey(i)" class="glyphicon glyphicon-remove pull-right" style="z-index:33;cursor: pointer">
                            </span>
                        <!--[formGroupName]="myGroupName[i]"-->
                        <div [formGroupName]="myGroupName[i]" > 

                         <div class="inner-addon left-addon ">
                            <i class="glyphicon  marker"  style="border: 5px solid #FED141"></i>
                            <input type="text" style="width:50% !important"  formControlName="title"  class="form-control" 
                                   placeholder="Exemple : Maarif, Grand Casablanca" name="Location"  
                                   Googleplace (setAddress)="getAddressOnChange($event,LocationCtrl)"><br/>
                        </div>

                        </div>
                        <!--[formGroupName]="myGroupName[i]"-->

                    </div>
                    <!--[formGroupName]="i" -->
                         </div>

                 </div>
                <br/>
                  <a (click)="addArray()" style="cursor: pointer" >+ Ajouter une ville étape</a>

when refresh the page it gives this error:

ERROR TypeError: Cannot read property '0' of undefined

Answer 1

If you can not read 0 of undefined it is because the variable that the navigator is reading is undefined.

I wanted to say that a variable in your code has no value in it so it can not have properties. You can check like this:

console.log (typeof theVariable);

Here, you try to read the type of value in theVariable witch gives the error. If the result is undefined it's mean that the variable is empty.

So, you have to check if the variable is not empty (undefined). You can check it like that:

   if (!theVariable) {return;}      // If theVariable is undefined return.
   else {/*do something*/}

Note: in my answer I speak about: 'theVariable' or 'the variable'. I have to do this because I do not know where the navigator give this error in your code so, I can not know in witch line is the mistake. I only can give you a way to debug your code with the variable witch give this mistake.