Question

我正在尝试在Angular 2中构建一个组合日期选择器，它将日期映射到三个下拉列表，一个用于日期，一个用于月份，一个用于一年。

我遵循以下优秀文章进行基本理解：

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）] =＆＃34;值＆＃34;因此，当更新文本字段值时，当我使用

在我的html页面中访问它时，会反映更改

{{ myform.controls.mydate.value }}

但是我不知道如何通过三次下拉来实现它？我的意思是，如果更改了任何下拉列表，{{myform.controls.mydate.value}}应显示更新的值。

我还尝试添加（ngModelChange）=＆＃34; onDateChange（）＆＃34;，其中onDateChange函数通过根据下拉列表中的选定值组成新日期来设置_value的值。但这不起作用。

有人可以指导吗？

Answer 1

您需要为包含问题视图（HTML）的组件（ControlValueAccessor）创建自定义ComboDatePickerComponent。在writeValue()或onTouched()中，您可以设置和读取三个单独输入元素的值。

Angular 2 Custom Control链接到ngControl，带有Control Value Accessor，Combo Date Picker

1 个答案: