How to create component that can support ngModel and ngControl directives

Question

To get access to NgControl in my component I create constructor:

NgControl _cd;
MyDateEditComponent(@Self() @Optional() this._cd);

I want use my component like this:

<my-date-edit [(ngModel)]="date" ngControl="date">

or

<my-date-edit [(date)]="date" ngControl="date">

Now I have error:

Assertion failed: "No value accessor for (date) or you may be missing formDirectives in your directives list."

How to fix it?

score 3 · Answer 1 · answered Aug 08 '18 at 10:32

3

if you are using a ngModel on a custom component use the ControlValueAccessor

export class YourComponent implements ControlValueAccessor { 
    // need to imlement following methods
    onChange = (val: Date) => { };
    onTouched = () => { };

    writeValue(val: Date) {
        // your ngModel value comes under here
    }

    registerOnChange(fn: (val: Date) => void) {
        this.onChange = fn;
    }

    registerOnTouched(fn: () => void): void {
        this.onTouched = fn;
    }
}

answered Aug 08 '18 at 10:32

Sachila Ranawaka

39,756
7
56
80

I added implementation of `ControlValueAccessor`, but error still there. I stub every method with print('stub'). There is not output in console. Only error. – Cododoc Aug 08 '18 at 11:47
what is the error – Sachila Ranawaka Aug 08 '18 at 11:50
Assertion failed: "No value accessor for (date) or you may be missing formDirectives in your directives list." – Cododoc Aug 08 '18 at 12:07
https://stackoverflow.com/questions/45659742/angular4-no-value-accessor-for-form-control?answertab=active#tab-top – Sachila Ranawaka Aug 08 '18 at 12:10

How to create component that can support ngModel and ngControl directives

1 Answers1