AngularJS 带验证的输入掩码
AngularJS input mask with validation
我有一个指令,它具有输入控件的掩码和验证。它基本上是一个时间输入,用户可以在其中输入 45(45 分钟)或 2.5(2.5 小时 => 150 分钟)之类的内容。输入在编辑时是 type=number
,但在使用过滤器显示结果时是 type=text
。
(只允许15分钟的增量,滤镜应用于模糊事件)
一切正常,除了当我单击文本框时初始值丢失了。在 focus
事件中,scope.minutes
值未定义,这应该是控制器中设置的 90
值。我不明白为什么。
angular.module('demoApp', [])
.controller('MainController', MainController)
.filter("hoursMinutes", function () {
return function (mins) {
if (mins == 0) return "0 mins";
var hours = ((mins - (mins % 60)) / 60);
var minutes = (mins % 60);
return (hours > 0 ? hours + " hr" + (hours === 1 ? "" : "s") : "") + (minutes > 0 ? " " + minutes + " min" + (minutes === 1 ? "" : "s") : "");
}
})
.directive("ixTimeEntry", function ($filter) {
return {
restrict: "A",
require: 'ngModel',
scope: {
minutes: "=",
filter: "@",
inputFormat: "@"
},
link: function (scope, element, attr, ngModel) {
// could set a max attribute, so mins can't be more than 1440 (a day)?
var inputFormat = scope.inputFormat || "minutes";
var filter = scope.filter || "hoursMinutes";
// for DOM -> model validation
ngModel.$parsers.unshift(function (value) {
var result = validate(value);
ngModel.$setValidity('ixTimeEntry', result.valid);
return result.value;
});
// for model -> DOM validation
ngModel.$formatters.unshift(function (value) {
ngModel.$setValidity('ixTimeEntry', true);
return $filter(filter)(value);
});
function validate(input) {
var result = { valid: false, value: input };
if (input === undefined) return result;
input = +input;
if (input === 0) return result;
if (input < 0) return result;
if (inputFormat === "minutes") {
// entering as minutes:
// if 15, 30, 45, 60, 75, 90, etc => treat as minutes
// if .25, .5, .75, 1, 1.25, ...12 => treat as hours
// else (e.g. 13, 14, 16, 17, 18, etc) => invalid
if (input % 15 === 0) result = { valid: true, value: input };
if (input % .25 === 0 && input <= 12) result = { valid: true, value: input * 60 };
} else if (inputFormat === "hours") {
// entering as hours:
// if .25, .5, .75, 1, 1.25, etc => treat as hours
// else => invalid
if (input % .25 === 0) result = { valid: true, value: input * 60 };
} else {
throw "Invalid inputFormat in timeEntry";
}
return result;
}
function addMask(text) {
return $filter(filter)(text);
}
function removeMask(text) {
if (inputFormat === "hours")
return +text / 60;
return text;
}
element.val(addMask(scope.minutes));
element.bind("blur", function () {
element.attr("type", "text");
scope.$apply(function () {
var value = validate(element.val()).value;
scope.minutes = value;
element.val(addMask(value));
});
});
element.bind("focus", function () {
element.attr("type", "number");
scope.$apply(function () {
element.val(removeMask(scope.minutes));
});
});
}
};
});;
function MainController() {
var vm = this;
vm.minutes1 = 90;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="MainController as vm">
<form id="timeForm" name="timeForm" >
<input type="text" class="form-control" name="time" placeholder="time" ix-time-entry input-format="minutes" minutes="vm.minutes" filter="hoursMinutes" ng-required="true" ng-model="vm.minutes1" />
</form>
<br>
Model: {{vm.minutes1}}<br>
Valid: {{timeForm.time.$valid}}<br>
</div>
您只在 MainController
中设置了 vm.minutes1 = 90;
。如果您也设置 vm.minutes = 90;
,它会起作用。
angular.module('demoApp', [])
.controller('MainController', MainController)
.filter("hoursMinutes", function () {
return function (mins) {
if (mins == 0) return "0 mins";
var hours = ((mins - (mins % 60)) / 60);
var minutes = (mins % 60);
return (hours > 0 ? hours + " hr" + (hours === 1 ? "" : "s") : "") + (minutes > 0 ? " " + minutes + " min" + (minutes === 1 ? "" : "s") : "");
}
})
.directive("ixTimeEntry", function ($filter) {
return {
restrict: "A",
require: 'ngModel',
scope: {
minutes: "=",
filter: "@",
inputFormat: "@"
},
link: function (scope, element, attr, ngModel) {
// could set a max attribute, so mins can't be more than 1440 (a day)?
var inputFormat = scope.inputFormat || "minutes";
var filter = scope.filter || "hoursMinutes";
// for DOM -> model validation
ngModel.$parsers.unshift(function (value) {
var result = validate(value);
ngModel.$setValidity('ixTimeEntry', result.valid);
return result.value;
});
// for model -> DOM validation
ngModel.$formatters.unshift(function (value) {
ngModel.$setValidity('ixTimeEntry', true);
return $filter(filter)(value);
});
function validate(input) {
var result = { valid: false, value: input };
if (input === undefined) return result;
input = +input;
if (input === 0) return result;
if (input < 0) return result;
if (inputFormat === "minutes") {
// entering as minutes:
// if 15, 30, 45, 60, 75, 90, etc => treat as minutes
// if .25, .5, .75, 1, 1.25, ...12 => treat as hours
// else (e.g. 13, 14, 16, 17, 18, etc) => invalid
if (input % 15 === 0) result = { valid: true, value: input };
if (input % .25 === 0 && input <= 12) result = { valid: true, value: input * 60 };
} else if (inputFormat === "hours") {
// entering as hours:
// if .25, .5, .75, 1, 1.25, etc => treat as hours
// else => invalid
if (input % .25 === 0) result = { valid: true, value: input * 60 };
} else {
throw "Invalid inputFormat in timeEntry";
}
return result;
}
function addMask(text) {
return $filter(filter)(text);
}
function removeMask(text) {
if (inputFormat === "hours")
return +text / 60;
return text;
}
element.val(addMask(scope.minutes));
element.bind("blur", function () {
element.attr("type", "text");
scope.$apply(function () {
var value = validate(element.val()).value;
scope.minutes = value;
element.val(addMask(value));
});
});
element.bind("focus", function () {
element.attr("type", "number");
scope.$apply(function () {
element.val(removeMask(scope.minutes));
});
});
}
};
});;
function MainController() {
var vm = this;
vm.minutes = 90;
vm.minutes1 = 90;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="MainController as vm">
<form id="timeForm" name="timeForm" >
<input type="text" class="form-control" name="time" placeholder="time" ix-time-entry input-format="minutes" minutes="vm.minutes" filter="hoursMinutes" ng-required="true" ng-model="vm.minutes1" />
</form>
<br>
Model: {{vm.minutes1}}<br>
Valid: {{timeForm.time.$valid}}<br>
</div>
我有一个指令,它具有输入控件的掩码和验证。它基本上是一个时间输入,用户可以在其中输入 45(45 分钟)或 2.5(2.5 小时 => 150 分钟)之类的内容。输入在编辑时是 type=number
,但在使用过滤器显示结果时是 type=text
。
(只允许15分钟的增量,滤镜应用于模糊事件)
一切正常,除了当我单击文本框时初始值丢失了。在 focus
事件中,scope.minutes
值未定义,这应该是控制器中设置的 90
值。我不明白为什么。
angular.module('demoApp', [])
.controller('MainController', MainController)
.filter("hoursMinutes", function () {
return function (mins) {
if (mins == 0) return "0 mins";
var hours = ((mins - (mins % 60)) / 60);
var minutes = (mins % 60);
return (hours > 0 ? hours + " hr" + (hours === 1 ? "" : "s") : "") + (minutes > 0 ? " " + minutes + " min" + (minutes === 1 ? "" : "s") : "");
}
})
.directive("ixTimeEntry", function ($filter) {
return {
restrict: "A",
require: 'ngModel',
scope: {
minutes: "=",
filter: "@",
inputFormat: "@"
},
link: function (scope, element, attr, ngModel) {
// could set a max attribute, so mins can't be more than 1440 (a day)?
var inputFormat = scope.inputFormat || "minutes";
var filter = scope.filter || "hoursMinutes";
// for DOM -> model validation
ngModel.$parsers.unshift(function (value) {
var result = validate(value);
ngModel.$setValidity('ixTimeEntry', result.valid);
return result.value;
});
// for model -> DOM validation
ngModel.$formatters.unshift(function (value) {
ngModel.$setValidity('ixTimeEntry', true);
return $filter(filter)(value);
});
function validate(input) {
var result = { valid: false, value: input };
if (input === undefined) return result;
input = +input;
if (input === 0) return result;
if (input < 0) return result;
if (inputFormat === "minutes") {
// entering as minutes:
// if 15, 30, 45, 60, 75, 90, etc => treat as minutes
// if .25, .5, .75, 1, 1.25, ...12 => treat as hours
// else (e.g. 13, 14, 16, 17, 18, etc) => invalid
if (input % 15 === 0) result = { valid: true, value: input };
if (input % .25 === 0 && input <= 12) result = { valid: true, value: input * 60 };
} else if (inputFormat === "hours") {
// entering as hours:
// if .25, .5, .75, 1, 1.25, etc => treat as hours
// else => invalid
if (input % .25 === 0) result = { valid: true, value: input * 60 };
} else {
throw "Invalid inputFormat in timeEntry";
}
return result;
}
function addMask(text) {
return $filter(filter)(text);
}
function removeMask(text) {
if (inputFormat === "hours")
return +text / 60;
return text;
}
element.val(addMask(scope.minutes));
element.bind("blur", function () {
element.attr("type", "text");
scope.$apply(function () {
var value = validate(element.val()).value;
scope.minutes = value;
element.val(addMask(value));
});
});
element.bind("focus", function () {
element.attr("type", "number");
scope.$apply(function () {
element.val(removeMask(scope.minutes));
});
});
}
};
});;
function MainController() {
var vm = this;
vm.minutes1 = 90;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="MainController as vm">
<form id="timeForm" name="timeForm" >
<input type="text" class="form-control" name="time" placeholder="time" ix-time-entry input-format="minutes" minutes="vm.minutes" filter="hoursMinutes" ng-required="true" ng-model="vm.minutes1" />
</form>
<br>
Model: {{vm.minutes1}}<br>
Valid: {{timeForm.time.$valid}}<br>
</div>
您只在 MainController
中设置了 vm.minutes1 = 90;
。如果您也设置 vm.minutes = 90;
,它会起作用。
angular.module('demoApp', [])
.controller('MainController', MainController)
.filter("hoursMinutes", function () {
return function (mins) {
if (mins == 0) return "0 mins";
var hours = ((mins - (mins % 60)) / 60);
var minutes = (mins % 60);
return (hours > 0 ? hours + " hr" + (hours === 1 ? "" : "s") : "") + (minutes > 0 ? " " + minutes + " min" + (minutes === 1 ? "" : "s") : "");
}
})
.directive("ixTimeEntry", function ($filter) {
return {
restrict: "A",
require: 'ngModel',
scope: {
minutes: "=",
filter: "@",
inputFormat: "@"
},
link: function (scope, element, attr, ngModel) {
// could set a max attribute, so mins can't be more than 1440 (a day)?
var inputFormat = scope.inputFormat || "minutes";
var filter = scope.filter || "hoursMinutes";
// for DOM -> model validation
ngModel.$parsers.unshift(function (value) {
var result = validate(value);
ngModel.$setValidity('ixTimeEntry', result.valid);
return result.value;
});
// for model -> DOM validation
ngModel.$formatters.unshift(function (value) {
ngModel.$setValidity('ixTimeEntry', true);
return $filter(filter)(value);
});
function validate(input) {
var result = { valid: false, value: input };
if (input === undefined) return result;
input = +input;
if (input === 0) return result;
if (input < 0) return result;
if (inputFormat === "minutes") {
// entering as minutes:
// if 15, 30, 45, 60, 75, 90, etc => treat as minutes
// if .25, .5, .75, 1, 1.25, ...12 => treat as hours
// else (e.g. 13, 14, 16, 17, 18, etc) => invalid
if (input % 15 === 0) result = { valid: true, value: input };
if (input % .25 === 0 && input <= 12) result = { valid: true, value: input * 60 };
} else if (inputFormat === "hours") {
// entering as hours:
// if .25, .5, .75, 1, 1.25, etc => treat as hours
// else => invalid
if (input % .25 === 0) result = { valid: true, value: input * 60 };
} else {
throw "Invalid inputFormat in timeEntry";
}
return result;
}
function addMask(text) {
return $filter(filter)(text);
}
function removeMask(text) {
if (inputFormat === "hours")
return +text / 60;
return text;
}
element.val(addMask(scope.minutes));
element.bind("blur", function () {
element.attr("type", "text");
scope.$apply(function () {
var value = validate(element.val()).value;
scope.minutes = value;
element.val(addMask(value));
});
});
element.bind("focus", function () {
element.attr("type", "number");
scope.$apply(function () {
element.val(removeMask(scope.minutes));
});
});
}
};
});;
function MainController() {
var vm = this;
vm.minutes = 90;
vm.minutes1 = 90;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="MainController as vm">
<form id="timeForm" name="timeForm" >
<input type="text" class="form-control" name="time" placeholder="time" ix-time-entry input-format="minutes" minutes="vm.minutes" filter="hoursMinutes" ng-required="true" ng-model="vm.minutes1" />
</form>
<br>
Model: {{vm.minutes1}}<br>
Valid: {{timeForm.time.$valid}}<br>
</div>