Получение значения из выбора с помощью вложенной модели в угловом 2

Question

Я пытаюсь узнать, как использовать Nested Model при создании динамических форм в моем компоненте. Однако у меня возникают проблемы с выбранным тегом. Кажется, я не могу установить или получить значение от него. Это можно наблюдать, потому что значение по умолчанию, установленное в методе AppComponent.initPhone(), устанавливает выпадающее меню. И когда я вручную выбираю элемент из раскрывающегося списка, любой элемент, значение остается неопределенным (как можно увидеть в разделе сведений о myForm на странице).

Вот мой plunker: http://plnkr.co/edit/iLITdV?p=preview

А вот соответствующий код (я думаю), если plunker когда-нибудь умереть:

//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

Вместо использования [value] в ваш выбор, используйте name:

Так следующее

<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> 

Должно быть:

<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> 

Ваш раздвоенный Plunker