使用角度2中的嵌套模型从选择中获取值

Question

I'm trying to learn how to use the Nested Model 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).

Here's my plunker: http://plnkr.co/edit/iLITdV?p=preview

And here's the relevant code (I think) should the plunker ever die:

//phone.component.ts
import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
    selector: 'phone',
    template: `
    <div [formGroup]="phoneForm">
      <div class="form-group col-xs-6">
        <label>Phone number</label>
        <input type="text" class="form-control" placeholder="Phone" formControlName="phone">
        <small *ngIf="phoneForm.controls.phone.hasError('required') && phoneForm.controls.phone.touched" class="text-danger">
            Phone number is required
        </small>
        <small *ngIf="(phoneForm.controls.phone.hasError('minlength') || phoneForm.controls.phone.hasError('maxlength')) && phoneForm.controls.phone.touched" class="text-danger">
            Phone number is to be 10 numbers long
        </small>
      </div>
      <div class="form-group col-xs-6">
        <label>Phone Type</label>
        <select class="form-control" formControlName="phoneType">
          <option [value]="home" title="For home phone">HOME</option>
          <option [value]="sms" title="For text messaging">SMS</option>
          <option [value]="tty" title="For the deaf">TTY</option>
        </select>
      </div>
    </div>
    `
})
export class PhoneComponent {
    @Input('group')
    public phoneForm: FormGroup;
}

-

<!-- snippet from app.component.html -->
<!-- phones -->
        <div formArrayName="phones">
          <div *ngFor="let phone of myForm.controls.phones.controls; let i = index" class="panel panel-default">
            <div class="panel-heading">
              <span>Phone {{i+1}}</span>
              <span class="glyphicon glyphicon-remove pull-right" *ngIf="myForm.controls.phones.controls.length > 1" (click)="removePhone(i)"></span>
            </div>
            <div class="panel-body" [formGroupName]="i">
              <phone [group]="myForm.controls.phones.controls[i]"></phone>
            </div>
          </div>
        </div>

        <div class="margin-20">
          <a (click)="addPhone()" style="cursor: default">
            Add another phone number +
          </a>
        </div>

-

// 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 => {
        //   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']
      })
    }

Answer 1

Instead of using [value] in your select, use name :

So the following

<select class="form-control" formControlName="phoneType">
  <option [value]="home" title="For home phone">HOME</option>
  <option [value]="sms" title="For text messaging">SMS</option>
  <option [value]="tty" title="For the deaf">TTY</option>
</select>

Should be:

<select class="form-control" formControlName="phoneType">
   <option name="home" title="For home phone">HOME</option>
   <option name="sms" title="For text messaging">SMS</option>
   <option name="tty" title="For the deaf">TTY</option>
</select>

Your forked Plunker