Дополнительная UI-Masking для zipcode для принятия 5 или 9 цифр

Question

Используя UI_mask, я хочу, чтобы zipcode принимался как (xxxxx-xxxx или xxxxx).

Для того, чтобы сделать это, я использовал

< input type="text" name="zipcode" ui-mask="99999?-9999" ui-mask-placeholder ng-model="zipCode"> 

Но это принимает 8 или 9 цифр и имеет заполнитель из (_____-____).

Есть ли способ принять 5 или 9 цифр (используя ui-mask)?

Answer 1

Невозможно принять только 5 ИЛИ 9 цифр только с angular-ui-mask, но это можно сделать с помощью angular-ui-validate.

angular-ui-mask для маски и валидации от 1 до 5 цифр.

angular-ui-validate для проверки от 6 до 9 цифр.

Пожалуйста, взгляните на рабочий снимок внизу.

var app = angular.module('myApp', ['ui.mask', 'ui.validate']); 
 
app.controller('MainController', ['$scope', function ($scope) { 
 
    $scope.formData = {'zip': ''}; 
 
    $scope.validateZip = function(zip) { 
 
     // no zip code is valid. left this for 'required'. 
 
     if(!zip) return true; 
 
     // true if 5 or 9 digits 
 
     return zip.match(/^(\d{5}|\d{9})$/); 
 
    } 
 
}]); 
 

 
angular.bootstrap(document.getElementById('myApp'), ['myApp']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-mask/1.8.7/mask.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-validate/1.2.2/validate.min.js"></script> 
 
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"> 
 

 
<div id="myApp" class="container"> 
 
    <form name="myForm"> 
 
    <div class="form-group" ng-controller="MainController" ng-class="{'has-error': myForm.zipcode.$error.mask || myForm.zipcode.$error.validator}"> 
 
     <label for="zipcode">Zip code:</label> 
 
     <input type="text" ng-model="formData.zip" ui-mask="99999?-?9?9?9?9" ui-validate="'validateZip($value)'" class="form-control" id="zipcode" name="zipcode"> 
 
     <span class="help-block" ng-if="myForm.zipcode.$error.mask" >Invalidated by ui-mask</span> 
 
     <span class="help-block" ng-if="myForm.zipcode.$error.validator">Invalidated by ui-validator</span> 
 
    </div> 
 
    </form> 
 
</div>