formBuilder를 사용하여 angular2에서 선택 드롭 다운을 바인딩 할 수 있습니까?

Question

나는 약간의 연구를했는데 그것이 있어야하는 것처럼 간단하지는 않다는 것을 알고 놀랐습니다.

ngModel을 사용하는 몇 가지 방법이 있습니다. Bind and fetch dropdown list value in typescript and Angular2 및 기타와 같습니다. 하지만 쉽게 내 선택한 옵션을 내 formControlName var에 바인딩 할 수 있기를 원합니다.

이 내가 시도 것입니다 :

.HTML

<form id="myForm" name="father" [formGroup]="fatherForm" (ngSubmit)="createFather()"> 
    <div class="row"> 
     <select formControlName="pref" id="f"> 
       <option value=null disabled selected>Prefijo</option> 
       <option *ngFor="let item of prefs" [ngValue]="hola">{{item.name}}</option> 
      </select> 

     </div> 
</form> 

.TS

fatherForm: FormGroup; 

this.fatherForm = this.formBuilder.group({ 
      pref: ['AA'] 
}); 

this.prefs=[ 
    {name: "AA"}, 
    {name: "BB"} 
    ]; 

기본값으로 작동합니다. 그러나 BB를 선택하면 기본값이 선택됩니다. 기본값은 '내가 잘못하고있는 중이 야 무엇 Bind Select List with FormBuilder Angular 2

에 해리 - 닌에 의해

이 방법 제안'을 할 때 같은 됩니까?

참고 : 물론 양식의 다른 입력 사항이 있습니다. 간략하게하기 위해 무시되었습니다.

편집

나는이 plunkr에서 동일한 예제를 사용하여 시도하고이 중 하나가 작동하지 않습니다. http://plnkr.co/edit/Rf9QSSEuCepsqpFc3isB?p=preview 양식을 보낸 후 값을 건드리지 않았 음을 나타냅니다.

<form id="myForm" name="father" [formGroup]="fatherForm"> 
    <div class="row"> 
    <select formControlName="pref" id="f"> 
      <option value=null disabled selected>Prefijo</option> 
      <option *ngFor="let item of prefs" [value]="item.name">{{item.name}}</option> 
     </select> 

    </div> 
    <button type="submit">Submit</button> 
</form> 
<p>Value: {{ fatherForm.value | json }}</p> 

및

name:string; 
fatherForm : FormGroup; 
prefs=[ 
{name: "AA"}, 
{name: "BB"} 
]; 
constructor(fb:FormBuilder) { 
    this.fatherForm = fb.group({ 
    pref : [this.prefs.name] 
}); 
} 

을 다음과 같은

Answer 1

안녕 나는 해 주시기 바랍니다 그리고 나는 또한 plunkr 작업 만들었습니다.

희망이 당신