使用 angular ngMessage 进行带有错误消息的表单验证

Question

我正在使用带有多个 select 字段的 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 }">

它奏效了，所以我猜这是不奏效的条件。

Answer 1

好的，看来 ui-select 和 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 视图中将 required 替换为 ui-select-required。

使用 angular ngMessage 进行带有错误消息的表单验证

Form validation with error message using angular ngMessage

javascript

angularjs

ui-select2

ui-select

ng-messages