ngModel data clearing when the array being used by ngFor length is increased

Ionic Framework ionic-v3
1

I am trying to give the user of a form the ability to add as many text fields as they want using a ngFor loop, it works but any data contained in the ngModel i.e. anything entered into the input text area is wiped when the ngFor array length is increased.

So if I have an array containing one text fields data and I add/push another text field to the array so the ngModel shows two text boxes one the page, the data in the first will be cleared.

<!-- start button that adds field --->  

    <ion-col col-12 >
        <button class="button" ion-button button-block padding data-tab-disabled="true" (click)='this.function_add_generic_room();'> CLICK TO ADD ADDITIONAL ROOMS </button>
    </ion-col>

<!-- end button--->   

<!-- start for each element in loop ---> 

    <ion-col col-12 *ngFor="let g of this._property_generic_room;">
         <ion-item>
             <ion-label stacked>ITEM NAME</ion-label>
             <ion-textarea type="text" [(ngModel)]="g.name" name="_generic_name">
             </ion-textarea>
         </ion-item>

        </ion-col>

<!--end loop --->  

<!--start code --->  

        public function_add_generic_room() {

            this._property_generic_room_count++;
            let arr = [];
            arr['cleanliness'] = 0;
            arr['comments'] = '';

            this._property_generic_room.push(arr);

         }

<!--end code --->