Angular2 - Creating a mask that injects NgModel but cannot use with NgControl
<p>I am trying to create a mask directive in <code>Angular2</code> by injecting <code>NgModel</code>. However, when the directive is placed in a tag with <code>ngControl</code>, an exception is thrown:</p>

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

<p>HTML:</p>

<pre><code>&lt;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"/&gt;
</code></pre>

<p>Component constructor:</p>

<pre><code>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;
}
</code></pre>

<p>this is the plunker: <a href="https://plnkr.co/edit/TlVWlQL2FpDeuoAMiy6z?p=preview" rel="nofollow">https://plnkr.co/edit/TlVWlQL2FpDeuoAMiy6z?p=preview</a> </p>

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

<p>Thanks in advance!</p>