2

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

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

问题Plunkr

4

3 回答 3

3

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

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

于 2015-03-10T23:05:24.273 回答
0

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

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

  1. 当ui-select您当时使用单个选择框时，将所需属性放在该选择元素上，如果您不提供值，表单将自动变为无效ui-select
  2. 如果您使用多项选择，那么元素级别的 required 属性将无济于事（Github 问题链接）。为了解决这个问题，您需要添加一个指令来验证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

希望这可以帮助你，谢谢。

于 2015-03-06T20:38:08.110 回答
0

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

<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>

普朗克

于 2017-07-17T10:32:29.630 回答