验证此示例中的第一个字段时,我无法显示错误消息。
只有第二个字段显示消息。 你能告诉我我的代码有什么问题吗?
http://plnkr.co/edit/OXtrm9skUUe1D6e8F8gw?p=preview
var app = angular.module('plunker', []);
app.directive('gaTime', function () {
var EMAIL_REGX = /^(?:2[0-3]|[01][0-9]):[0-5][0-9]:[0-5][0-9]$/;
return {
restrict: 'E',
scope: {
timeInfo: '=info' // Unique to directive scope
},
template: '<input type="text" name="operativeToTime" data-ng-model="timeInfo" data-ng-required="false" data-ng-pattern="/^(?:2[0-3]|[01][0-9]):[0-5][0-9]:[0-5][0-9]$/">'
};
});
app.controller('MainCtrl', function($scope) {
// Default values
$scope.operativeFromTime = '00:00:00';
$scope.operativeToTime = '23:59:59';
});
<form name="addDeviceForm" data-ng-submit="submitForm(addDeviceForm.$valid)" novalidate>
<data-ga-time name="operativeFromTime" info="operativeFromTime"></data-ga-time>
<span data-ng-show="addDeviceForm.operativeFromTime.$invalid">+++ INVALID FROM.</span>
<br>
<data-ga-time name="operativeToTime" info="operativeToTime"></data-ga-time>
<span data-ng-show="addDeviceForm.operativeToTime.$invalid">+++ INVALID TO.</span>
</form>
最佳答案
问题是 name
在指令的模板中是硬编码的。
要解决此问题,请使用模板函数将 name
属性动态添加到您的模板字符串中:
template: function(tElem, tAttrs){
return '<input type="text" name="' + tAttrs.name +
'" data-ng-model="timeInfo" data-ng-required="false"
data-ng-pattern="/^(?:2[0-3]|[01][0-9]):[0-5][0-9]:[0-5][0-9]$/">';
}
注意:form validation in Angular 需要name
属性
关于javascript - ng-show 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24768915/