You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 })
)
}
}
}
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
hotel.edit.component.ts file
Html file to show these array controls
The text was updated successfully, but these errors were encountered: