Search code examples
angularjsangular-materialangular-ui

Getting AngularUI Mask to work with Angular Material

I have a project that utilizes the Angular Material framework in which I'm trying to use Angular UI Mask for phone number formatting on an input field. I'm able to get each one to work individually (the material label performs properly without the mask, and the mask works just fine without the material label). I'm not able to get them to work together, where I would like the placeholder in the input field to read "Phone Number" and then have that placeholder transition to a label above the input (as a material input would) and then have the mask appear in the textbox. The only way I can get these to work, it shows the placeholder and the label at the same time.

Code is simply:

<md-input-container>
        <label>Phone Number</label>
        <input aria-label="Phone Number" id="phone" name="phone" type="text" ng-value="phone" ng-model="phone" ui-mask="(999) 999-9999" ui-mask-placeholder placeholder="Phone Number">
</md-input-container>

Here's the Plunker: http://plnkr.co/edit/fXIRnKwdnBPwEODYuTBP

Solution

  • Add: 

    ui-options={addDefaultPlaceholder:false}

    This hides the input mask until onBlur occurs.

    It works with or without the label.

    Here's a plunker: http://plnkr.co/edit/TQxPE2XLG5on1JSKHRHq?p=preview