Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FormArray controls not accessable inside the FormBuilder #22

Open
rahul6612 opened this issue Nov 9, 2019 · 0 comments
Open

FormArray controls not accessable inside the FormBuilder #22

rahul6612 opened this issue Nov 9, 2019 · 0 comments

Comments

@rahul6612
Copy link

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant