例外：Angular 2 自定义表单输入没有提供者

Question

我正在尝试实现

ControlValueAccessor

对于自定义 Angular 2 表单输入

我遇到异常

EXCEPTION: No provider for MyDatePicker! (MyDatePickerValueAccessor -> MyDatePicker)

我将代码上传到 Plunker

Plunker 自定义控件 事件绑定 正在工作

Plunker 自定义控件 值访问器 不工作

还有我的 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; }
    }

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

• forms - Angular2 - Radio Button Binding - Stack Overflow
• ControlValueAccessor - ts
• Forms - ts
• Implementing Angular2 forms – Beyond basics (part 2) | Restlet - We Know About APIs
• ng2-ckeditor/CKEditor.d.ts at 6699185310a5d50776b541ae7a2ae5cb55e4394a · chymz/ng2-ckeditor
• restlet-sample-angular2-forms/company.details.ts at master · restlet/restlet-sample-angular2-forms
• angular/control_value_accessor.ts at 2.0.0-beta.9 · angular/angular

Answer 1

努力写

providers: [CUSTOM_VALUE_ACCESSOR, MyDatePicker]

Answer 2

在以下人员的帮助下 ❤️❤️ 和 ❤️❤️

我确实找到了答案

---

MyDatePicker.ts

---

1. 添加

   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.From

    //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.to

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

MyDatePickerValueAccessor.ts

---

1. 来自

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

2. 至

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

3. 来自

   //providers: [CUSTOM_VALUE_ACCESSOR , ]
   

4. 至

   providers: [CUSTOM_VALUE_ACCESSOR , MyDatePicker,ElementRef]
   

5. 来自

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

6. 至

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

7. 来自

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

8. 至

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

---

这里是完整的例子

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

这里是原来的 mydatepicker

• Github : Angular2 date picker - Angular2 reusable UI component