FormArray controls not accessable inside the FormBuilder

[rahul6612]

the problem is form array controls(ac, parking) is not visible in templates others controls like(id, name, price...address) working fine.Only problem with amenities FormArray controls. What i am doing wrong here. hodel.model.ts file

import { AmenitiesModel } from "./amenities.model";
export class HotelModel {
  constructor(public id:number, public name:string, public imagePath:string, public price: number, public description:string,
              public city:string, public address:string, public amenities:AmenitiesModel[]){}

hotel.edit.component.ts file

import { Component, OnInit } from '@angular/core';
import {FormArray, FormBuilder, FormControl, FormGroup} from "@angular/forms";
import { HotelService} from "../hotel.service";
import {ActivatedRoute, Params, Router} from "@angular/router";
import { HotelModel } from "../hotel.model";

@Component({
  selector: 'app-hotel-edit',
  templateUrl: './hotel-edit.component.html',
  styleUrls: ['./hotel-edit.component.css']
})
export class HotelEditComponent implements OnInit {
  hotelEditForm:FormGroup;
  editMode;
  id:number;
  hotel:HotelModel;

  constructor(
              private fb: FormBuilder,
              private hotelService:HotelService,
              private route:ActivatedRoute,
              private router:Router,

              ) { }

  ngOnInit() {
    this.route.params.subscribe(
      (params: Params) => {
        this.id = +params['id'];
        this.editMode = params['id'] != null;
        this.initHotelForm()
    }
    );
    this.hotelEditForm = this.fb.group({
    id:[''],
    name:[''],
    price:[''],
    imagePath:[''],
    description:[''],
    city:[''],
    address:[''],
    amenities:new FormArray([])
  })
  }

  private initHotelForm(){
    let hotelId:number=null;
    let hotelName = '';
    let hotelPrice:number=null;
    let hotelImagePath = '';
    let hotelDescription = '';
    let hotelCity = '';
    let hotelAddress = '';
    let hotelAmenities = new FormArray([]);

    if(this.editMode){
       this.hotelService.getHotel(this.id).subscribe(data => {
         const hotel = data;
         hotelId = hotel.id;
         hotelName = hotel.name;
         hotelPrice = hotel.price;
         hotelImagePath = hotel.imagePath;
         hotelDescription = hotel.description;
         hotelCity = hotel.city;
         hotelAddress = hotel.address;
         if (hotel['amenities']) {
            for (let amenitie of hotel.amenities) {
                hotelAmenities.push(
                  new FormGroup({
                    ac: new FormControl(amenitie.ac),
                    'parking': new FormControl(amenitie.parking)
                  }))
            }}
       this.hotelEditForm.controls['id'].setValue(hotelId);
       this.hotelEditForm.controls['name'].setValue(hotelName);
       this.hotelEditForm.controls['imagePath'].setValue(hotelImagePath);
       this.hotelEditForm.controls['price'].setValue(hotelPrice);
       this.hotelEditForm.controls['description'].setValue(hotelDescription);
       this.hotelEditForm.controls['address'].setValue(hotelCity);
       this.hotelEditForm.controls['address'].setValue(hotelAddress);
       this.hotelEditForm.controls['amenities'].setValue(hotelAmenities);
      });
    }
  }

  getControls() {
  return (<FormArray>this.hotelEditForm.get('amenities')).controls;
  }
  save(){
    if(this.editMode){
      this.hotelService.updateHotel(this.id, this.hotelEditForm.value).subscribe(()=>
        this.router.navigate(['/hotels'], { relativeTo: this.route })
      )
    }
    else{
      this.hotelService.addHotel(this.hotelEditForm.value).subscribe(()=>
        this.router.navigate(['/hotels'], { relativeTo: this.route })
      )
    }
  }
}

Html file to show these array controls

<div class="row">
        <div class="col-xs-12" formArrayName="amenities">
          <div class="row" *ngFor="let amenitieCtrl of getControls(); let i = index" [formGroupName]="i" style="margin-top: 10px">
            <div class="col-xs-8"><input type="text" class="form-control" formControlName="ac">
            </div>


           <div class="col-xs-2"> ppppppppppppppppppppppppppppppppppppppppp
              <input type="text" class="form-control" formControlName="parking">
           </div>
          </div>
        </div>