angular2-text-mask2/example/app.html

Angular 2 directive for input text masking

<form class="form-horizontal">
  <div class="form-group">
    <label for="1" class="col-sm-4 control-label">Masked Input using <code>NgModel</code></label>
    <div class="col-sm-8 input-group">
      <input
        id="1"
        name="phone"
        [(ngModel)]="myModel"
        [textMask]="{mask: mask}"
        type="text"
        class="form-control"
      />
      <span class="input-group-addon">Model value: {{myModel || "[empty]"}}</span>
    </div>
  </div>

  <div class="form-group">
    <label for="2" class="col-sm-4 control-label">
      Masked Input using <code>NgModel</code> with initial value
    </label>
    <div class="col-sm-8 input-group">
      <input
        id="2"
        name="phoneWithValue"
        [(ngModel)]="modelWithValue"
        [textMask]="{mask: mask}"
        type="text"
        class="form-control"
      />
      <span class="input-group-addon">Model value: {{modelWithValue || "[empty]"}}</span>
    </div>
  </div>

  <div class="form-group">
    <label for="3" class="col-sm-4 control-label">
      Masked Input using <code>FormControl</code> with initial value
    </label>
    <div class="col-sm-8 input-group">
      <input
        id="3"
        name="phoneFormControl"
        [formControl]='formControlInput'
        [textMask]="{mask: mask}"
        type="text"
        class="form-control"
      />
      <span class="input-group-addon">Model value: {{formControlInput.value || "[empty]"}}</span>
    </div>
  </div>
</form>