如何使用formBuilder綁定angular2中的選擇下拉列表？

Question

我做了一些研究，我很驚訝地發現它並不像應該的那樣直截了當。

我知道有一些使用ngModel的方法。 就像在typecript和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時，仍然會選擇默認值。 當默認值為''時會發生同樣的情況

這種方法由Harry-ninh在FormBuilder Angular 2的Bind Select List中提出

我究竟做錯了什么？

注意：當然，表單中還有其他輸入，為簡單起見，忽略它們。

編輯

我嘗試在這個plunkr中使用完全相同的例子，它也不起作用。 http://plnkr.co/edit/Rf9QSSEuCepsqpFc3isB?p=preview發送表單后，表明尚未觸及該值。

Answer 1

嗨，我請按照以下方式做

<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]  
 });
}

我也創造了工作的plunkr 。

希望對你有幫助