角度验证器和用户界面选择答案

【问题标题】：angular-validator and ui-select角度验证器和用户界面选择
【发布时间】：2017-07-17 18:32:29
【问题描述】：

我是角度的新手。我正在使用 angular-validator 来验证我的应用程序中的输入。我正在使用ui-select 插件来显示选择列表。我需要验证用户是否提交了表单并且他没有在选择列表中选择一个选项，然后我将显示所需的错误消息，就像 Plunkr 中的第一个输入一样。我相信验证是对的，但它没有显示任何错误消息，我在网上搜索过，但仍然没有运气。

任何帮助将不胜感激，在此先感谢（为我的英语不好道歉）

Problem Plunkr

【问题讨论】：

附加的 plunkr 不工作
能否请您使 plunkr 可行。
哦，对不起，它只能在 chrome 中工作，我已经更新了 Plunkr，这是新的：plnkr.co/edit/TbDVS2AmJTk8akvAY0C3?p=preview
您目前的问题是什么，在 Firefox 中进行验证？或者您想显示对 ui-select 字段的验证？
我想显示 ui-select 字段的验证

标签： angularjs ui-select

【解决方案1】：

有一个指令可以解决这个问题，代码如下：

app.directive('showErrors', function($timeout) {
return {
  restrict: 'A',
  require: '^form',
  link: function (scope, el, attrs, formCtrl) {
    // find the text box element, which has the 'name' attribute
    var inputEl   = el[0].querySelector("[name]");
    // convert the native text box element to an angular element
    var inputNgEl = angular.element(inputEl);
    // get the name on the text box
    var inputName = inputNgEl.attr('name');

    // only apply the has-error class after the user leaves the text box
    var blurred = false;
    inputNgEl.bind('blur', function() {
      blurred = true;
      el.toggleClass('has-error', formCtrl[inputName].$invalid);
    });

    scope.$watch(function() {
      return formCtrl[inputName].$invalid
    }, function(invalid) {
      // we only want to toggle the has-error class after the blur
      // event or if the control becomes valid
      if (!blurred && invalid) { return }
      el.toggleClass('has-error', invalid);
    });

    scope.$on('show-errors-check-validity', function() {
      el.toggleClass('has-error', formCtrl[inputName].$invalid);
    });

    scope.$on('show-errors-reset', function() {
      $timeout(function() {
        el.removeClass('has-error');
      }, 0, false);
    });
  }
}});

这是文档：http://blog.yodersolutions.com/bootstrap-form-validation-done-right-in-angularjs/，这是一个带有 ui-select 的示例：Plunkr

【讨论】：

【解决方案2】：

您正在使用表单，然后通过播放表单变量在 AngularJS 中进行验证跟踪很容易。请根据需要提及表单元素并通过formName.attributeName.$error.required 之类的操作得到错误

问题不清楚，所以可能有两种方法可以解决您的问题。

在ui-select 中，当您当时使用单个选择框时，将所需属性放在该选择元素上，如果您不提供ui-select 的值，表单将自动失效
如果您使用多选，则元素级别的 required 属性对您没有帮助 (Github issue link)。为了解决这个问题，您需要添加一个指令来验证required

指令

module.directive('uiSelectRequired', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$validators.uiSelectRequired = function(modelValue, viewValue) {
        return modelValue && modelValue.length;
      };
    }
  };
});

Plunkr

希望对你有帮助，谢谢。

【讨论】：

好的，谢谢，我正在使用单个选择框，我提到过，我认为验证正在工作，如果您没有在选择框中选择元素，则无法提交表单，但我不知道如何显示所需的消息，就像 Plunkr 中显示的第一个输入一样

【解决方案3】：

试试这个，希望对你有帮助：

<div class="form-group col-md-3" style="margin-left:50px" ng-class="{'has-error': datosDeUbicacion.$submitted && datosDeUbicacion.viviendas.$invalid}">
        <label class="control-label" for="tipoViviendas">TIPO DE VIVIENDA</label>
        <ui-select name="viviendas" ng-model="viviendas.selected" class="form-control" theme="select2" reset-search-input="true" required>
          <ui-select-match placeholder="Selecciona">{{$select.selected.nombre}}</ui-select-match>
          <ui-select-choices repeat="item in tipoViviendas | filter: $select.search">
            <div ng-bind-html="item.nombre | highlight: $select.search"></div>
          </ui-select-choices>
        </ui-select>
        <div ng-if="datosDeUbicacion.$submitted && datosDeUbicacion.viviendas.$error.required" class="help-block">
                   <div>This is required</div>
        </div>
</div>

Plunker

【讨论】：