我已经使用AngularJS创建了HTML表单,并将required
属性添加到了某些字段。
对于这些字段,如果字段不是$pristine
,还会显示一条错误消息,并且$invalid
:
<input type="text" ng-model="SomeModel.SomeProperty" name="myField" class="input-block-level" required>
<p ng-show="frmMyForm.myField.$invalid && !frmMyForm.myField.$pristine" class="error-text">This field is required!</p>
这很好。但是,如果用户只是跳过了必填字段(从未将光标放在其中),则该字段始终是原始字段,因此即使单击提交按钮后也不会显示错误消息。因此,用户面对的是他们无法提交的表单,但是没有错误文本可以告诉他们原因。
我的想法是,将所有表单字段设置$dirty
为Submit动作将触发错误消息,以显示用户只是跳过的任何必填字段。这可能吗?如果是这样,怎么办?
提前致谢。
我们做的事情类似于您的答案,我们有一个formSubmitted指令绑定到submit事件,如果被触发,我们在表单控制器上设置$ submitted变量。这样,您可以使用与ShowValidationMessages类似的方式来使用它,但是它是可重用的。很简单的指令:
app.directive('formSubmitted', [function () {
return {
restrict: 'A',
require: 'form',
link: function (scope, element, attrs, ctrl) {
ctrl.$submitted = false;
element.on('submit', function () {
scope.$apply(function () {
ctrl.$submitted = true;
});
});
}
};
}]);
您将此作为属性应用于表单标签本身。
我们采取了进一步的步骤,我们的要求是仅在以下条件成立时才显示验证错误:元素无效并且表单已提交或输入元素模糊。因此,我们最后得到了另一个要求ngModel的指令,该指令设置了ngModel控制器上元素的模糊状态。
最后,为了消除所有重复的html代码,以检查所有这些内容,例如,您ng-show="frmMyForm.myField.$invalid && (!frmMyForm.myField.$pristine || MyObject.ShowValidationMessages)"
也将其封装到指令中。此模板指令使用Bootstrap样板包装我们的输入元素,并处理所有验证内容。所以现在我所有的表单输入都遵循以下模式:
<div data-bc-form-group data-label="Username:">
<input type="text" id="username" name="username" ng-model="vm.username" data-bc-focus required />
</div>
和bcFormGroup指令将其转换为以下启用了引导程序的html:
<div class="form-group" ng-class="{'has-error': showFormGroupError()}" data-bc-form-group="" data-label="Username:">
<label for="username" class="col-md-3 control-label ng-binding">Username:</label>
<div class="col-md-9">
<input type="text" id="username" name="username" ng-model="vm.username" data-bc-focus="" required="" class="ng-pristine form-control ng-valid ng-valid-required">
<span class="help-block ng-hide" ng-show="showRequiredError()">Required</span>
</div>
</div>
这使事情保持干燥,并为支持哪种类型的输入提供了极大的灵活性。
更新:
这是bcFormGroup指令的基本清单。默认模板使用引导程序的水平形式,但可以根据您的喜好进行调整。
app.directive('bcFormGroup', ['$compile', '$interpolate', function ($compile, $interpolate) {
return {
restrict: 'A',
template:
'<div class="form-group" ng-class="{\'has-error\': showFormGroupError()}">' +
'<label for="{{inputId}}" class="col-md-3 control-label">{{label}}</label>' +
'<div class="col-md-9">' +
'<bc-placeholder></bc-placeholder>' +
'</div>' +
'</div>',
replace: true,
transclude: true,
require: '^form',
scope: {
label: '@',
inputTag: '@'
},
link: function (scope, element, attrs, formController, transcludeFn) {
transcludeFn(function (clone) {
var placeholder = element.find('bc-placeholder');
placeholder.replaceWith(clone);
});
var inputTagType = scope.inputTag || 'input';
var inputElement = element.find(inputTagType);
var fqFieldName = formController.$name + '.' + inputElement.attr('name');
var formScope = inputElement.scope();
if (inputElement.attr('type') !== 'checkbox' && inputElement.attr('type') !== 'file') {
inputElement.addClass('form-control');
}
scope.inputId = $interpolate(inputElement.attr('id'))(formScope);
scope.hasError = false;
scope.submitted = false;
formScope.$watch(fqFieldName + '.$invalid', function (hasError) {
scope.hasError = hasError;
});
formScope.$watch(formController.$name + '.$submitted', function (submitted) {
scope.submitted = submitted;
});
if (inputElement.attr('data-bc-focus') != null || inputElement.attr('bc-focus') != null) {
scope.hasBlurred = false;
formScope.$watch(fqFieldName + '.$hasBlurred', function (hasBlurred) {
scope.hasBlurred = hasBlurred;
});
}
if (inputElement.attr('required')) {
scope.hasRequiredError = false;
formScope.$watch(fqFieldName + '.$error.required', function (required) {
scope.hasRequiredError = required;
});
inputElement.after($compile('<span class="help-block" ng-show="showRequiredError()">Required</span>')(scope));
}
if (inputElement.attr('type') === 'email') {
scope.hasEmailError = false;
formScope.$watch(fqFieldName + '.$error.email', function (emailError) {
scope.hasEmailError = emailError;
});
inputElement.after($compile('<span class="help-block" ng-show="showEmailError()">Invalid email address</span>')(scope));
}
scope.showFormGroupError = function () {
return scope.hasError && (scope.submitted || (scope.hasBlurred === true));
};
scope.showRequiredError = function () {
return scope.hasRequiredError && (scope.submitted || (scope.hasBlurred === true));
};
scope.showEmailError = function () {
return scope.hasEmailError && (scope.submitted || (scope.hasBlurred === true));
};
}
};
}]);
更新:
以下伪指令设置$ focused和$ hasBlurred:
app.directive('bcFocus', [function () {
var focusClass = 'bc-focused';
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ctrl) {
ctrl.$focused = false;
ctrl.$hasBlurred = false;
element.on('focus', function () {
element.addClass(focusClass);
var phase = scope.$root.$$phase;
if (phase == '$apply' || phase == '$digest') {
ctrl.$focused = true;
} else {
scope.$apply(function () {
ctrl.$focused = true;
});
}
}).on('blur', function () {
element.removeClass(focusClass);
var phase = scope.$root.$$phase;
if (phase == '$apply' || phase == '$digest') {
ctrl.$focused = false;
ctrl.$hasBlurred = true;
} else {
scope.$apply(function () {
ctrl.$focused = false;
ctrl.$hasBlurred = true;
});
}
});
}
};
}]);
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句