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