角2選擇不綁定

我這個打了很長一段時間，選擇列表顯示好，但我不能讓它顯示所選擇的價值 - 它是空的。我究竟做錯了什麼？角2選擇不綁定

<div class="form-group"> 
 
    <label for="ai_total_volume_select">Select Volume Range:</label> 
 
    <select class="form-control" [(ngModel)]="selectedValue" name="items" id="ai_total_volume_select"> 
 
     <option [value]="item1">Select</option> 
 
     <option [value]="item2">&lt; 0.5 cm3</option> 
 
     <option [value]="item3">&gt; 0.5 cm3</option> 
 
    </select> 
 
    </div> 
 
    <label>AAA</label> 
 
    <div>{{selectedValue}}</div>

編輯：我打得多一點，現在知道了問題的根源，但不知道如何解決它。該選擇字段內：

<form [formGroup]="form">

。不知何故，它不喜歡它。一旦我將它移動到表單之外 - 它就可以工作！但我需要它在形式之內。其他領域 - 複選框，輸入等完全正常工作在相同的形式...

來源

2017-09-20 user1298416

是一種反應形式或模板驅動的形式，這部分？ –

我想這是一個混合。 – user1298416

這可能是問題所在 - 我認爲你不應該嘗試將這些方法結合起來。從你原來的職位，它看起來像你使用你定義的HTML模板，並以適當形式指令形式[模板驅動（https://angular.io/guide/forms）的形式。可能值得檢查一下這個文檔，因爲我認爲如果你試圖將這兩者結合起來就會遇到問題 - 而且這會讓人感到困惑！ –

你搞砸了你逝去的空對象值一點點。添加''，它將工作創建plunker。

<select class="form-control" [(ngModel)]="selectedValue" name="items" id="ai_total_volume_select"> 
    <option [value]="'item1'">Select</option> 
    <option [value]="'item2'">&lt; 0.5 cm3</option> 
    <option [value]="'item3'">&gt; 0.5 cm3</option> 
</select>

或使用價值不[]

<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate> 

<select class="form-control" [(ngModel)]="selectedValue" name="items" id="ai_total_volume_select"> 
    <option value="item1">Select</option> 
    <option value="item2">&lt; 0.5 cm3</option> 
    <option value="item3">&gt; 0.5 cm3</option> 
</select> 
</form>

無功形式使用FormControlName

<form [formGroup]="form"> 
    <select class="form-control" formControlName="selectedValue" name="items" id="ai_total_volume_select"> 
    <option value="item1">Select</option> 
    <option value="item2">&lt; 0.5 cm3</option> 
    <option value="item3">&gt; 0.5 cm3</option> 
    </select> 
<form> 

{{form.controls.get('selectedValue').value}}

爲了更好地理解模板語法閱讀本article

ngForm和Reactive Forms

來源

2017-09-20 02:31:13 alexKhymenko

由於同樣的情緒，亞歷克斯，我沒有改變它只是價值，但它仍然無法正常工作，如果我把它裏面formGroup ... – user1298416

嘗試使用反應形式與ngModel它不工作:-) – alexKhymenko

你應該選擇一個 – alexKhymenko

除非item值在你的組件定義你不需要[value]結合。

你可以在這裏使用標準HTML：

<option value="item1">Select</option> 
<option value="item2">&lt; 0.5 cm3</option> 
<option value="item3">&gt; 0.5 cm3</option>

來源

2017-09-20 02:35:31

謝謝，加思，似乎它是另一個問題，雖然 - 我更新了我的問題。 – user1298416

角2選擇不綁定

回答

相關問題