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

我已經做了一些研究，我很驚訝地發現它並不像應該那樣直截了當。如何使用formBuilder綁定angular2中的選擇下拉列表？

我知道有一些使用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 發送表單後，表明該值沒有被觸及。

debug info

來源

2017-05-01 Joan Gil

你檢查此[鏈接]（http://stackoverflow.com/questions/39689049/drop-down-list-in-angular-2-model-driven-form） –

您好我請做如下

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

希望這將幫助你

來源

2017-05-01 06:10:04

感謝您的回答。知道我明白爲什麼它不起作用。即使這在你提供的plunkr中完美工作。但是我在這裏有一個小問題...'property'name'不存在於類型'{name：string; } [''它根本沒有任何意義，因爲當我檢查pref var時，它清楚地表明它有一個名爲「name」的屬性，爲什麼可能在那裏發生？ –

你有更新你的代碼嗎？如果是，那麼你能更新你在這裏試過的東西嗎？併發布錯誤的截圖。 –

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

回答

相關問題