目前我在提交表单时遇到错误。
我注意到,当我为minlength设置所需长度时,它会显示成功,但在下面有$ error表示问题是minlength。
所以结构就是fo-address.html就是形式。 fo-address.js是一个将值放入表单的指令。 然后在表单中有jn-phone-number,它是从表单中获取信息的输入。
我试过调试这个并注意到问题只发生在minlength而不是maxlength,我不知道为什么这会抛出无效。 任何帮助或提示将不胜感激。如果需要额外信息,请与我们联系。感谢。
fo-address.html
形式的一部分<div class="col-xs-10 col-sm-5">
<label cms-translation="phone" cms-state="checkout">Phone</label>
<div jn-phone-number="model.shippingAddress.phone" input-type="number" ng-model="model.shippingAddress.phone" input-name="phone" minlength="phoneMin" maxlength="phoneMax" form="shippingForm" required="true" submitted="submitted" country="model.countryCode"></div>
</div>
指令
function ($state, localeService, urlHelper, checkoutService) {
return {
restrict: 'AE',
replace: true,
scope: false,
templateUrl: fo-address.html,
link: function ($scope, el, attrs) {
$scope.locale = localeService.getCurrentLocale();
$scope.onlyNumbers = /^\d+$/;
$scope.noDash = (/-\s/g, "");
$scope.default = true;
$scope.asia = false;
$scope.indo = false;
$scope.hk = false;
$scope.tw = false;
$scope.zipMin;
$scope.zipMax;
$scope.phoneMin;
$scope.phoneMax;
if ($scope.locale == "en-HK" || $scope.locale == "zh-HK" || $scope.locale == "en-TW" || $scope.locale == "zh-TW" || $scope.locale == "en-ID" || $scope.locale == "id-ID") {
$scope.asia = true;
$scope.default = false;
if ($scope.locale == "en-ID" || $scope.locale == "id-ID") {
$scope.indo = true;
$scope.phoneMin = 10;
$scope.phoneMax = 15;
}
else if ($scope.locale == "en-TW" || $scope.locale == "zh-TW") {
$scope.tw = true;
$scope.phoneMin = 10;
$scope.phoneMax = 15;
$scope.zipMin = 6;
$scope.zipMax = 6;
}
else if ($scope.locale == "en-HK" || $scope.locale == "zh-HK") {
$scope.hk = true;
$scope.phoneMax = 8;
$scope.phoneMax = 8;
}
}
else {
$scope.default = true;
}
}
}
}
jnPhoneNumber验证
'use strict';
define(['../jn-module'],
function (module) {
module.directive('jnPhoneNumber', [
function () {
return {
template: '<input type="{{inputType}}" name="{{inputName}}" class="form-control" ng-model="jnPhoneNumber" placeholder="{{placeholder}}" ng-required="required" minlength="{{minlength}}" maxlength="{{maxlength}}"/><span jn-validation="formNameAndInput" form-submitted="submitted"></span>',
restrict: 'AE',
require: '^ngModel',
scope: {
country: '=country',
jnPhoneNumber: '=',
inputName: '@',
form: '=',
submitted: '=',
required: '=',
minlength: '=',
maxlength: '=',
inputType: '@'
},
link: function (scope, element, attrs, ctrl) {
scope.formNameAndInput = scope.form[scope.inputName];
if(!scope.maxlength) {
scope.maxlength = 20;
}
if(!scope.minlength) {
scope.minlength = 10;
}
if(!scope.inputType) {
scope.inputType = 'text';
}
switch (scope.country) {
case 'US':
scope.placeholder = '(555) 555-5555';
break;
default:
scope.placeholder = '';
}
scope.$watch('jnPhoneNumber', function(newValue, oldValue) {
scope.setValue(newValue);
});
scope.setValue = function (value) {
if(scope.placeholder !== ''){
if (value) {
var x = value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
}
ctrl.$setViewValue(value);
}
};
}