[英]Form validation with error message using angular ngMessage
我正在将ui-select
与一些多选择字段一起使用,并且我想像这样实现客户端<form>
验证:
<form name="newProjectForm" ng-submit="p.addProject()" class="inputsContainer" novalidate>
<div class="form-group" ng-class="{ 'has-error' : newProjectForm.frameworks.$invalid &&
!newProjectForm.frameworks.$pristine }">
<label>Frameworks</label>
<ui-select name="frameworks" multiple ng-model="p.newProject.frameworks" sortable="true"
close-on-select="false" required>
<ui-select-match placeholder="Select framework...">{{$item.name}}</ui-select-match>
<ui-select-choices repeat="framework.id as framework in p.frameworksList
| propsFilter: {name: $select.search, language: $select.search}">
<div ng-bind-html="framework.name | highlight: $select.search"></div>
<small>
language : <span ng-bind-html="''+framework.language | highlight: $select.search"></span>
</small>
</ui-select-choices>
</ui-select>
<div ng-messages="newProjectForm.frameworks.$error">
<p ng-messages="required">THIS IS REQUIRED</p>
</div>
<p ng-show="newProjectForm.frameworks.$invalid && !newProjectForm.frameworks.$pristine"
class="help-block">Project frameworks is required.</p>
</div>
<!-- ... -->
所以,问题是我尝试的条件不起作用:
newProjectForm.frameworks.$invalid && !newProjectForm.frameworks.$pristine">
似乎总是错误的。
<div ng-messages="newProjectForm.frameworks.$error">
似乎也不起作用。
但是,我改为使用此行进行测试:
<div class="form-group" ng-class="{ 'has-error' : true }">
它起作用了,所以我猜测这是不起作用的条件。
好的,所以看起来ui-select
和required
不能一起使用。
因此,如果遇到相同的问题,则可以使用自定义指令而不是required:
app.directive('uiSelectRequired', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$validators.uiSelectRequired = function(modelValue, viewValue) {
if (modelValue && modelValue.length > 0)
return true;
return false;
};
}
};
});
然后,您只需要在HTML视图中用ui-select-required
替换required
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.