2016-05-14 43 views
1

我想在Angular 2中構建一個組合日期選擇器,它將日期映射到三個下拉列表,一個爲一天,一個爲一個月和一個一年。Angular 2自定義控件鏈接到ngControl與控制值訪問器,組合日期選取器

我下面進行基本的瞭解優秀的文章:

http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel 

在上面的例子中,筆者將其鏈接到1個控制即

<input class="form-control" [(ngModel)]="value" (blur)="onTouched()"> 

在我的情況,而不是

<input class="form-control" [(ngModel)]="value" (blur)="onTouched()"> 

我有:

<select [(ngModel)]="day"> 
<option *ngFor="let item of days" value="{{item}}">{{item}}</option> 
</select> 

<select [(ngModel)]="month"> 
<option *ngFor="let item of months" value="{{item}}">{{item}}</option> 
</select> 

<select [(ngModel)]="year"> 
<option *ngFor="let item of years" value="{{item}}">{{item}}</option> 
</select> 

與文章中的單例控件示例一切正常,因爲有兩種方式與[(ngModel)] =「value」進行綁定,所以當文本字段值更新時,我在html中訪問它時會反映更改頁面使用

{{ myform.controls.mydate.value }} 

但我不知道如何實現它與三個下拉?我的意思是,如果任何下拉列表發生更改,{{myform.controls.mydate.value}}應顯示更新後的值。

我也嘗試添加(ngModelChange)=「onDateChange()」,其中onDateChange函數通過在下拉菜單中根據選定的值組合新日期來設置_value的值。但這不起作用。

任何人都可以請指導?

+0

你可以請發佈解決這個問題? – ASR

回答

1

您需要爲組件(ComboDatePickerComponent)創建包含您的問題的視圖(HTML)的自定義ControlValueAccessor。在writeValue()onTouched()中,您可以設置和讀取三個單獨輸入元素的值。