title: Angular 4 inputs form set to null when using ngmodel
body: <p>I'm starting with angular, angular 4 specifically, and I'm dealing with an error:</p>
  
  <p>I'm creating a contact manager app, with two forms, one to add and other to edit contacts, and a panel displaying every contact data.
  The point is I pass with @Input / @Output all data from parent component (contacts.component.ts) to the child component (edit-contact.component.ts).</p>
  
  <p>At the freezing point I offer my plunker you'll see two ouputs, the first one on edit action click (at the contact panel) and the second one on the "edit it!" clicking button on the edit form. As you can see the contact data object is passing correctly from parent to child.</p>
  
  <pre><code>{id: 1, name: "Sofia Mejia Gomez", id_number: "87654667X", age: "32", phone: "984613164", …} contacts.component.ts:33
  {id: 1, name: "Sofia Mejia Gomez", id_number: "87654667X", age: "32", phone: "984613164", …} edit-contact.component.ts:36
  </code></pre>
  
  <p>Well, when I try to insert ngModel attribute on edit-contact.component.html template (commented at this freezing point) to make the form autofill with all contact data you choose on its panel, it works correctly but when I try to edit any input and click on "edit it!" button you can see an output on console with an object whose properties are set to null.</p>
  
  <pre><code>&lt;div class="input-group main-data"&gt;
      &lt;label for="name"&gt;&lt;/label&gt;
      &lt;input
        type="text" 
        class="form-control"
        name="name" 
        placeholder="Type your name..."&gt;&lt;!--bindon-ngModel="contactToEdit.name"--&gt;
      ...
    &lt;/div&gt;
  </code></pre>
  
  <p>Please, I'll appreciate all your comments.</p>
  
  <p>Here my Plunker: <a href="https://plnkr.co/edit/XQ1nswWI1gg22WtBad3O?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/XQ1nswWI1gg22WtBad3O?p=preview</a></p>