title: Getting the value from a select using nested model in angular 2
body: <p>I'm trying to learn how to use the <a href="https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2" rel="nofollow noreferrer">Nested Model</a> when creating dynamic forms in my component.  However, I'm having trouble with a select tag. I can't seem to set or get the value from it. This can be observed because the default value set in the AppComponent.initPhone() method is setting the dropdown. And when I manually select an item from the dropdown, any item, the value remains undefined (as can be seen in the myForm details section on the page).</p>
  
  <p>Here's my plunker: <a href="http://plnkr.co/edit/iLITdV?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/iLITdV?p=preview</a></p>
  
  <p>And here's the relevant code (I think) should the plunker ever die:</p>
  
  <pre><code>//phone.component.ts
  import { Component, Input } from '@angular/core';
  import { FormGroup } from '@angular/forms';
  
  @Component({
      selector: 'phone',
      template: `
      &lt;div [formGroup]="phoneForm"&gt;
        &lt;div class="form-group col-xs-6"&gt;
          &lt;label&gt;Phone number&lt;/label&gt;
          &lt;input type="text" class="form-control" placeholder="Phone" formControlName="phone"&gt;
          &lt;small *ngIf="phoneForm.controls.phone.hasError('required') &amp;&amp; phoneForm.controls.phone.touched" class="text-danger"&gt;
              Phone number is required
          &lt;/small&gt;
          &lt;small *ngIf="(phoneForm.controls.phone.hasError('minlength') || phoneForm.controls.phone.hasError('maxlength')) &amp;&amp; phoneForm.controls.phone.touched" class="text-danger"&gt;
              Phone number is to be 10 numbers long
          &lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="form-group col-xs-6"&gt;
          &lt;label&gt;Phone Type&lt;/label&gt;
          &lt;select class="form-control" formControlName="phoneType"&gt;
            &lt;option [value]="home" title="For home phone"&gt;HOME&lt;/option&gt;
            &lt;option [value]="sms" title="For text messaging"&gt;SMS&lt;/option&gt;
            &lt;option [value]="tty" title="For the deaf"&gt;TTY&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      `
  })
  export class PhoneComponent {
      @Input('group')
      public phoneForm: FormGroup;
  }
  </code></pre>
  
  <p>-</p>
  
  <pre><code>&lt;!-- snippet from app.component.html --&gt;
  &lt;!-- phones --&gt;
          &lt;div formArrayName="phones"&gt;
            &lt;div *ngFor="let phone of myForm.controls.phones.controls; let i = index" class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                &lt;span&gt;Phone {{i+1}}&lt;/span&gt;
                &lt;span class="glyphicon glyphicon-remove pull-right" *ngIf="myForm.controls.phones.controls.length &gt; 1" (click)="removePhone(i)"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="panel-body" [formGroupName]="i"&gt;
                &lt;phone [group]="myForm.controls.phones.controls[i]"&gt;&lt;/phone&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="margin-20"&gt;
            &lt;a (click)="addPhone()" style="cursor: default"&gt;
              Add another phone number +
            &lt;/a&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>-</p>
  
  <pre><code>// snippet from app.component.ts
      ngOnInit() {
          this.myForm = this._fb.group({
              name: ['', [Validators.required, Validators.minLength(5)]],
              addresses: this._fb.array([]),
              phones: this._fb.array([])
          });
  
          // add address
          this.addAddress();
          this.addPhone();
  
          /* subscribe to addresses value changes */
          // this.myForm.controls['addresses'].valueChanges.subscribe(x =&gt; {
          //   console.log(x);
          // })
      }
  
      initAddress() {
          return this._fb.group({
              street: ['', Validators.required],
              postcode: ['']
          });
      }
  
      initPhone() {
        let valids = Validators.compose([
          Validators.required, 
          Validators.minLength(10), 
          Validators.maxLength(10)
          ]);
        return this._fb.group({
          phone: ['502-555-1234', valids],
          phoneType: ['sms']
        })
      }
  </code></pre>