title: When I change the value of a form variable (ngModel), another one changes too
body: <p>I want to implements a form in Angular that change the saved profile info in my app. So I have created an object called User.ts that contains all properties:</p>
  <pre><code>class User{
    name:string,
    surname:string,
    email:string
    .....
  }
  </code></pre>
  <p>I have a component called profile, which allows me to see the saved user:</p>
  <pre><code>&lt;div&gt;
    &lt;p&gt;{{user.name}}&lt;/p&gt;
    &lt;p&gt;{{user.surname}}&lt;/p&gt;
    &lt;p&gt;{{user.email}}&lt;/p&gt;
    ....
  &lt;/div&gt;
  </code></pre>
  <p>Besides this component contains the form in which the user info is been updated:</p>
  <pre><code>&lt;div class=&quot;form&quot;&gt;
   &lt;input type=&quot;text&quot; [(ngModel)]=&quot;userForm.name&quot;&gt;
   &lt;input type=&quot;text&quot; [(ngModel)]=&quot;userForm.surname&quot;&gt;
   &lt;input type=&quot;text&quot; [(ngModel)]=&quot;userForm.email&quot;&gt;
   .....
  &lt;/div&gt;
  </code></pre>
  <p>You can see that in the profile.ts I have defined two variables called user:User and userForm:User, the first ones for view the current info and the second for save the form inputs. When I get the user from the api and I save It in user, then I initialize the userForm like:
  this.userForm  = this.user so the form at the beginning has the same value.</p>
  <p>The problem is that when I try to change the inputs in form, the user object change too and replicates the value of userForm. I don't know why have this behavior, because ngModel directive points to userForm not to user.</p>