Angular 2 自定义控件 link 到带有控件值访问器的 ngControl，组合日期选择器

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)]="value" 绑定的方式，所以当更新文本字段值时，当我访问它时，更改会反映出来我的 html 页面使用

{{ myform.controls.mydate.value }}

但我不确定如何通过三个下拉菜单实现它？我的意思是，如果任何下拉菜单发生变化，{{ myform.controls.mydate.value }} 应该显示更新后的值。

我还尝试添加 (ngModelChange)="onDateChange()"，其中 onDateChange 函数通过根据下拉列表中的所选值组成新日期来设置 _value 的值。但这是行不通的。

谁能指导一下吗？

Answer 1

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

Angular 2 自定义控件 link 到带有控件值访问器的 ngControl，组合日期选择器

Angular 2 Custom Control link to ngControl with Control Value Accessor, Combo Date Picker

angular2-forms

angular