-
Notifications
You must be signed in to change notification settings - Fork 745
Open
Description
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>
Metadata
Metadata
Assignees
Labels
No labels