title: Getting [Object Object] in angular application
body: <p>Getting <strong>[Object Object]</strong> in angular form and also dropdown(select) not set to default 0 index. While in case of edit everything working fine. Do I need to initialize model properties for this create page?</p>
  
  <p><a href="https://i.stack.imgur.com/K7rlz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K7rlz.png" alt="enter image description here"></a>  </p>
  
  <p><strong>Edit</strong> :  <strong>ngModelChange</strong> not calling the function <strong>doNameChange</strong>.</p>
  
  <p><strong>Component:</strong> </p>
  
  <pre><code>  export class User {
    Id: number;
    Name: string;
    Gender: string;    
  }
  this.user = {
        Id: 0,
        Name: '',
        Gender: ''
  }
  doNameChange(event) {
      debugger;
      console.log(event); // logs model value
    }
  </code></pre>
  
  <p><strong>Html:</strong></p>
  
  <pre><code> &lt;form (ngSubmit)="save(f.value, f.valid)" #f="ngForm" novalidate materialize&gt;      
        &lt;input id="Name" (ngModelChange)="doNameChange($event)" name="Name" #Name="ngModel" type="text" class="validate form-control" required minlength="3" [(ngModel)]="user.Name"&gt;
        &lt;select id="Gender"  name="Gender" #Gender="ngModel" class="validate form-control" [(ngModel)]="user.Gender" required&gt;
            &lt;option value=""&gt;-- Select Gender --&lt;/option&gt;
            &lt;option value="Male"&gt;Male&lt;/option&gt;
            &lt;option value="Female"&gt;Female&lt;/option&gt;
          &lt;/select&gt;
      &lt;/form&gt;
  </code></pre>