【问题标题】：EXCEPTION: No provider for Angular 2 custom form input例外：没有 Angular 2 自定义表单输入的提供者
【发布时间】：2016-06-27 05:10:52
【问题描述】：

我正在尝试实现

控制值访问器

对于自定义 Angular 2 表单输入

我得到了例外

例外：没有 MyDatePicker 的提供者！ (MyDatePickerValueAccessor -> MyDatePicker)

我将代码上传到 Plunker

Plunker Custom Control Event Binding Working

Plunker Custom Control Value Accessor Not Working

还有我的 ControlValueAccessor 实现

    import {MyDatePicker} from './MyDatePicker';
    import { Directive, Provider, forwardRef , } from 'angular2/core';
    import {ControlValueAccessor, NG_VALUE_ACCESSOR} from 'angular2/common';
    import {CONST_EXPR} from 'angular2/src/facade/lang';

    const CUSTOM_VALUE_ACCESSOR = CONST_EXPR(new Provider(
        NG_VALUE_ACCESSOR, { useExisting: forwardRef(() => MyDatePickerValueAccessor), multi: false }));

    @Directive({
        selector: 'my-date-picker',
        host: { '(dateChanged)': 'onChange($event)' },
        providers: [CUSTOM_VALUE_ACCESSOR]
    })
    export class MyDatePickerValueAccessor implements ControlValueAccessor {
        onChange = (_) => { };
        onTouched = () => { };

        constructor(private host: MyDatePicker) { }

        writeValue(value: any): void {
            this.host.selDate = value;
        }

        registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
        registerOnTouched(fn: () => void): void { this.onTouched = fn; }
    }

这里是我研究的一些链接：

【问题讨论】：

multi: true，那么您还有另一个可以跟踪的问题。
谢谢，这个有帮助，看起来返回值是来自 MyDatePicker 的对象
从导入 angular2/core 中删除 ,

标签： javascript typescript angular angular2-template angular2-forms

【解决方案1】：

试着写

providers: [CUSTOM_VALUE_ACCESSOR, MyDatePicker]

【讨论】：

它给出了异常：NgControlName 实例化期间出错！。
但是现在还有一个错误：Error during instantiation of t!.
谢谢，这个有帮助，提供者：[CUSTOM_VALUE_ACCESSOR , MyDatePicker,ElementRef] ，
实例化过程中的错误来自 MyDatePicke 它自己

【解决方案2】：

在以下的帮助下 ❤️@mnv❤️ 和 ❤️@eric-martinez❤️

我确实找到了答案

MyDatePicker.ts

添加

setValue(value) {
    this.selectionDayTxt = value;
    if(this.selectionDayTxt !== '') {
      let fmt = this.options.dateFormat !== undefined ? 
                this.options.dateFormat : this.dateFormat;
      let dpos = fmt.indexOf('dd');
      let mpos = fmt.indexOf('mm');
      let ypos = fmt.indexOf('yyyy');
      this.selectedDate = {day: parseInt(this.selectionDayTxt
                            .substring(dpos, dpos + 2)),
          month: parseInt(
            this.selectionDayTxt.substring(mpos, mpos + 2)),
          year: parseInt(
            this.selectionDayTxt.substring(ypos, ypos + 4))};
    }
    if(this.selectionDayTxt !== '') {
        this.selectionDayTxtForServer = 
            this.formatDateForServer(this.selectedDate);
    }
}

2.来自

    //ngOnChanges(changes: {[propName: string]: SimpleChange}) {
    //  this.selectionDayTxt = changes['selDate'].currentValue;
    //  if(this.selectionDayTxt !== '') {
    //      let fmt = this.options.dateFormat !== undefined ? 
    //                  this.options.dateFormat : this.dateFormat;
    //      let dpos = fmt.indexOf('dd');
    //      let mpos = fmt.indexOf('mm');
    //      let ypos = fmt.indexOf('yyyy');
    //      this.selectedDate = {day: parseInt(this.selectionDayTxt
    //                  .substring(dpos, dpos + 2)),
    //      month: parseInt(this.selectionDayTxt.substring(mpos, mpos + 2)),
    //      year: parseInt(this.selectionDayTxt.substring(ypos, ypos + 4))};
    //  }
    //}

3.到

    ngOnChanges(changes: {[propName: string]: SimpleChange}) {
        this.setValue(changes['selDate'].currentValue);
    }

MyDatePickerValueAccessor.ts

来自

//const CUSTOM_VALUE_ACCESSOR = CONST_EXPR(
//new Provider(NG_VALUE_ACCESSOR, { useExisting: forwardRef(() => 
//                          MyDatePickerValueAccessor), multi: false }));

到

const CUSTOM_VALUE_ACCESSOR = CONST_EXPR(
new Provider(NG_VALUE_ACCESSOR, { useExisting: forwardRef(() => 
                            MyDatePickerValueAccessor), multi: true }));

来自

//providers: [CUSTOM_VALUE_ACCESSOR , ]

到

providers: [CUSTOM_VALUE_ACCESSOR , MyDatePicker,ElementRef]

来自

//host: { '(dateChanged)': 'onChange($event)' }

到

host: { '(dateChanged)': 'onChange($event.formattedForServer)' }

来自

//writeValue(value: any): void {
    //this.host.selDate = value;
//}

到

writeValue(value: any): void {
    this.host.setValue(value);
}

这里是完整的例子

http://plnkr.co/edit/csFaER?p=preview

这里是原始的 mydatepicker

Github : Angular2 date picker - Angular2 reusable UI component

【讨论】：