Angular2 - Creating a mask that injects NgModel but cannot use with NgControl

Question

I am trying to create a mask directive in Angular2 by injecting NgModel. However, when the directive is placed in a tag with ngControl, an exception is thrown:

angular2.dev.js:23877 EXCEPTION: No provider for NgModel! (MaskDirective -> NgModel)

HTML:

<input type="text" class="form-control" id="telephone" name="telephone" placeholder="123-456-7890" [(ngModel)]="contactInfo.telephone" required ngControl="telephone" #telephone="ngForm" mask-input="(***) ***-****" [modify]="contactInfo.telephone"/>

Component constructor:

constructor(public model: NgModel, public ele: ElementRef, @Attribute("mask-input") maskPattern: string) {
    this.dividers = maskPattern.replace(/\*/g, "").split("");
    this.dividers.push("_");
    this.generatePattern(maskPattern);   
    this.numOfChar = 0;
}

this is the plunker: https://plnkr.co/edit/TlVWlQL2FpDeuoAMiy6z?p=preview

Injecting NgControl doesn't give access to the model value. What is the recommended solution for this?

Thanks in advance!

`@Inject(ContactService)` is redundant when the type is the same `ContactService` — Günter Zöchbauer, Apr 07 '16 at 04:15
I think you should it implement as custom value accessor like discussed in https://github.com/angular/angular/issues/2543#issuecomment-189004693 — Günter Zöchbauer, Apr 07 '16 at 04:55
just providing the DefaultValueAccessor worked, thank you so much! — Kyarie, Apr 08 '16 at 02:57
would be great if you could post your solution as answer ;-) I built one using a directive http://stackoverflow.com/questions/37800841/input-mask-fields-in-angular2-forms — Günter Zöchbauer, Jun 17 '16 at 17:51

Angular2 - Creating a mask that injects NgModel but cannot use with NgControl

0 Answers0