Two way data binding in form doesn't work Angular 2
<p>I have this form component that takes as input an <code>User</code> object. I want to use that object for two way data binding but it doesn't work. Any ideas where is the problem ?</p>

<hr>

<p>PS: The problem seems to come from the copying of the input parameter. If I pass the original it works fine, but if I pass a copy the two way data binding does not work. How can I make it work with the copy? </p>

<pre><code>&lt;user-form [selectedUser]="copyUser()" (isValidated)="onToggleDialog($event)"&gt;&lt;/user-form&gt; 


copyUser() :User {
  // when returning the copy it doesn't work, 
  // but when returning this.userToPass it works 
  return JSON.parse(JSON.stringify(this.userToPass));
}
</code></pre>

<hr>

<pre><code>import { Component, EventEmitter } from '@angular/core';

import {
    FormBuilder,
    FormGroup,
    Validators,
    AbstractControl,
    ReactiveFormsModule 
 } from '@angular/forms';

import { User } from '../../domain/user';
import { GlobalMailValidator } from '../../validators/mail/mail.validator';
import { Role } from '../../domain/role';
import { UserService } from '../../services/user.service';

 @Component({
     inputs: ['selectedUser'],
     outputs: ['isValidated'],
     selector: 'user-form',
     templateUrl: 'app/component/user/user.form.html'
 })
 export class UserForm {

     /**
      * The user passed to this component. It should preferably be a copy.
      */
     selectedUser: User;

     /**
      * All the roles in the DB.
      */
     roles: Role[];

     /**
      * All the time zones in the DB.
      */
     timeZones: any[];

     /**
      * Event emitter to output the edited user.
      * Returns null if the operation was canceled.
      */
     isValidated: EventEmitter&lt;User&gt;;

     constructor(private userSerive: UserService) {

        this.isValidated = new EventEmitter();
        // instantiate the roles array only ones on component creation
        this.userSerive.listRoles().then( res =&gt; this.roles = res);
        this.userSerive.listTimeZones().then( res =&gt; this.timeZones = res);
    }

    assessValidation(success: boolean) :void {
        // the selected user object does not change :(
        console.log(this.selectedUser);
        if(success) {
            //this.isValidated.emit(this.selectedUser);
        } else {
            // if a cancel operation was requested emit null instead
            this.isValidated.emit(null);
        }

    }

 }
</code></pre>

<hr>

<pre><code>&lt;!-- THIS DOES NOT UPDATE !!!! --&gt;
&lt;div&gt;{{selectedUser.firstName}}&lt;/div&gt;
&lt;form #controlForm="ngForm"&gt;
            &lt;div class="ui-g"&gt;
                    &lt;input type="text"
                           placeholder="Login"
                           [(ngModel)]="selectedUser.login"
                           name="login"
                           #login="ngModel"
                    /&gt;      
            &lt;/div&gt;
            &lt;div class="ui-g"&gt;
                &lt;input  type="text" 
                        placeholder="First Name"
                        [(ngModel)] = "selectedUser.firstName"
                        name="firstName"
                        #firstName="ngModel"
                /&gt;
            &lt;/div&gt;
            &lt;div class="ui-g"&gt;
                &lt;input  type="text"
                        placeholder="Last Name"
                        [(ngModel)] = "selectedUser.lastName"
                        name="lastName"
                        #lastName="ngModel"
                /&gt;
            &lt;/div&gt;            
            &lt;div class="ui-g"&gt;
                &lt;input  type="text"
                        placeholder="e-mail"
                        [(ngModel)]="selectedUser.email"
                        name="email"
                        #email="ngModel"
                /&gt;
            &lt;/div&gt;

            &lt;div class="ui-g"&gt;
                    &lt;input type="checkbox" [(ngModel)]="selectedUser.isDeleted" name="isDeleted" #isDeleted="ngModel"/&gt;
            &lt;/div&gt;

            &lt;button type="button" [disabled]="!controlForm.form.valid" class="ui button" (click)="assessValidation(true)"&gt;Save&lt;/button&gt;
            &lt;button type="button" class="ui button" (click)="assessValidation(false)"&gt;Cancel&lt;/button&gt;
&lt;/form&gt;
</code></pre>

<hr>

<pre><code>import { Role } from '../domain/role';

export class User {
  fullName: string;
  password: string;
  isDeleted: boolean = false;

  constructor(public id: number, 
      public login:string,       
      public firstName:string, 
      public lastName:string, 
      public email:string, 
      public locale:string, 
      public timeZone:string,
      public version:number,
      public roles:Role[]) { 
    this.fullName = this.firstName + ' '  + this.lastName;    
  }
}
</code></pre>

<hr>

<pre><code>export class Role {
  id: number;
  name: string;
  refId: string;
}
</code></pre>