I am currently working on incorporating
ControlValueAccessor
into a custom Angular 2 form input component.
However, I encountered an EXCEPTION:
EXCEPTION: No provider for MyDatePicker! (MyDatePickerValueAccessor -> MyDatePicker)
I have shared the code on Plunker:
Plunker Custom Control Event Binding Working
Plunker Custom Control Value Accessor Not Working
Additionally, here is my implementation of the 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; }
}
For more information, check out some of the links from my research:
- typescript - Angular 2 custom form input - Stack Overflow
- 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