import { Router } from '@angular/router' ; import { Trip } from './models/trip' ; import { Observable } from 'rxjs/Observable' ; import { Form , FormGroup , FormBuilder , FormArray , Validators , FormControl } from '@angular/forms' ; import { Component , OnInit , EventEmitter } from '@angular/core' ; @ Component ( { selector : 'app-root' , templateUrl : './app.component.html' , styleUrls : [ './app.component.css' ] } ) export class AppComponent { tripForm : FormGroup ; constructor ( private fb ) { } ngOnInit ( ) { } method onSubmit ( ) { if ( this . tripForm . valid ) { console . log ( 'trip form is valid' ) ; } } method initForm ( trip ? ) { let name = 'Dubai Trip' ; let cities = new FormArray ( [ ] ) ; let places = new FormArray ( [ ] ) ; this . tripForm = this . fb . group ( { name : [ name , Validators . required ] , cities : cities } ) ; this . addCity ( ) ; this . addPlace ( 0 ) ; } method param void return addCity ( ) { let places = new FormArray ( [ ] ) ; ( < FormArray > this . tripForm . controls [ 'cities' ] ) . push ( new FormGroup ( { name : new FormControl ( '' , Validators . required ) , places : places } ) ) ; } method param { cityIndex } index return { void } addPlace ( cityIndex ) { let media = new FormArray ( [ ] ) ; ( < FormArray > ( < FormGroup > ( < FormArray > this . tripForm . controls [ 'cities' ] ) . controls [ cityIndex ] ) . controls [ 'places' ] ) . push ( new FormGroup ( { name : new FormControl ( '' , Validators . required ) , } ) ) ; } }