form component

import { Component, Input, OnInit, EventEmitter, Output } from '@angular/core';
import { FORM_DIRECTIVES } from '@angular/common';
import { Store } from '@ngrx/store';
import { FormControl,
         FormBuilder,
         FormGroup,
         REACTIVE_FORM_DIRECTIVES,
         Validators } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import { Person } from '../../models/';

@Component({
  selector: 'person-form',
  directives: [ REACTIVE_FORM_DIRECTIVES ],
  templateUrl: './people.form.template.html'
})

export class PersonForm {

  @Input() person: Person;
  @Output() onSave: EventEmitter<any> = new EventEmitter();

  private personForm: FormGroup;

  constructor( private formBuilder: FormBuilder ){
    this.personForm = this.formBuilder.group({
      urn: [ '', Validators.required ],
      username: [ '', Validators.required ],
      roles: [ [], Validators.required ],
      authorities: [ [], Validators.required ],
      tenantUrn: [ '', Validators.required ],
      emailAddress: [ '', Validators.required ],
      active: [ true, Validators.required ],
      givenName: [ '', Validators.required ],
      surname: [ '', Validators.required ]
    });
  }

  onSubmit( e ): void {
    e.preventDefault();
    this.onSave.emit( this.personForm.value );
  }

  ngOnChanges( changes: any ): void {
    let personChanged: Person = changes.person.currentValue;
    if( personChanged ){
      setTimeout(function(){
        Object.keys( personChanged ).map(function( key, index ){
          (<FormControl>this.personForm.controls[ key ]).updateValue( personChanged[ key ] )
        }.bind(this));

      }.bind(this), 0);
    }
  }

}