title: Angular 2 validate input based on mask
body: <p>I'm using <a href="https://github.com/text-mask/text-mask/tree/master/angular2#readme" rel="nofollow noreferrer">this plugin</a> within my Angular 2 project to mask some inputs.</p>
  
  <p>The problem I have with this is to validate if the input has the proper mask applied.</p>
  
  <p>Whenever I try to check for the value it's alwayas <code>valid</code>. For example, I have a mask to fill a phone number, just like in the example:</p>
  
  <pre><code>@Component({
    template: `
      &lt;input [textMask]="{mask: mask}" type="tel" formControlName="phone" /&gt;
    `
  })
  
  export class AppComponent {
    public myModel = ''
    public mask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
  }
  </code></pre>
  
  <p>But even when I fill, let's say, 2 numbers <code>(11_) ___-____</code> it's considering the field as <code>valid</code>.</p>
  
  <p>I tried to se a custom Validator to check for the input length, but it's also passing, since it's being prefilled with <code>_</code>.</p>
  
  <pre><code>this.registerForm = this._fb.group({
      'phone': [null, Validators.compose([
          Validators.required,
          Validators.minLength(14),
          Validators.maxLength(14)
      ])],
  });
  </code></pre>
  
  <p>I don't know how to create a validation for this type of scenario, envolving more complex validations.</p>