首页 文章

EXCEPTION:没有Angular 2自定义表单输入的提供程序

提问于
浏览
1

我正在尝试实施

ControlValueAccessor

对于自定义Angular 2表单输入

我得到了EXCEPTION

例外:没有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; }
    }

这里有一些来自我研究的链接:

2 回答

  • 1

    试着写

    providers: [CUSTOM_VALUE_ACCESSOR, MyDatePicker]
    
  • 3

    在❤️@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.to

    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);
    }
    

    这是完整的例子

    这里是原始的mydatepicker

相关问题