title: How to use ngModel with a custom control inside a form?
body: <p>I created a component for handling select box, now when I put it in form tag after submitted form the result of the selection doesn't show up in console.</p>
  
  <p>What's the problem with my code? how can I fix this?</p>
  
  <ul>
  <li>testOption: is array of object I passed throw the select box with <code>@Input</code>.</li>
  </ul>
  
  <p><strong>here is select box component:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit, Input } from '@angular/core';
  
  @Component({
      selector: 'input-select',
      template:`
        &lt;div class="field-select"&gt;
          &lt;span&gt;&lt;icon name="select-arrow" size="10"&gt;&lt;/icon&gt;&lt;/span&gt;
          &lt;select name="{{name}}" class="field"&gt;
            &lt;option value="0" disabled selected&gt;{{label}}&lt;/option&gt;
            &lt;option *ngFor="let option of options" [ngValue]="option.value"&gt;{{option.name}}&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      `
  })
  export class InputSelectComponent implements OnInit {
      @Input() label: string;
      @Input() name: string;
      @Input() options;
  
  
      // testOptions = [
      //   {value:'test',name:'test2'},
      //   {value:'test',name:'test2'}
      // ];
  
      constructor() { }
  
      ngOnInit() {
        console.log(this.options);
       }
  
  }
  </code></pre>
  
  <p><strong>Usage in html:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input-select label="test" name="select2" [options]="testOption"&gt;&lt;/input-select&gt;
  </code></pre>
  
  <p><strong>form html:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form role="form" class="form" #f="ngForm" (ngSubmit)="onSubmit(f)"&gt;
      &lt;input class="field" name="name" ngModel type="text" placeholder="n1"&gt;
      &lt;input-select label="b2" name="select2" [options]="testObject"&gt;&lt;/input-select&gt;
      &lt;input class="field" name="building-type" type="text" ngModel placeholder="b3"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>console log:</strong> (there is no select box value)</p>
  
  <pre><code>Object {name: "test", building-type: "tset" }
  </code></pre>