угловой-валидатор и ui-select

Question

Я новичок в угловой. Я использую angular-validator для проверки ввода в моем приложении. Я использую плагин ui-select для отображения списка выбора. Мне нужно, чтобы проверить, отправил ли пользователь форму &, он не выбрал опцию в списке выбора, тогда я собираюсь показать требуемое сообщение об ошибке, например, первый ввод в Plunkr. Я считаю, что проверка правильна, но в ней нет сообщения об ошибке, я искал в Интернете, но мне все еще не повезло в R & D.

Любая помощь была бы оценена, спасибо заранее (Извините, английский)

Problem Plunkr

Answer 1

Вы используете форму, то отслеживание проверки будет легко в AngularJS, играя переменную формы. Упомяните элемент формы по мере необходимости и получите ошибку, сделав так: formName.attributeName.$error.required

Вопрос не ясен, так что может быть 2 пути могут решить вашу проблему.

1. В ui-select при использовании одного списка выбора в то время расставило обязательный атрибут на этого выберите элемент, форма автоматически становится недействительным, если вы не предоставите значение для ui-select
2. При использовании множественного выбора, то обязательный атрибут на уровне элемента не поможет вам (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

Надеется, что это может помочь вам, спасибо.

Answer 2

There's одна директива, решить эту проблему, here's код:

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/ и это пример Wiht UI-выберите: Plunkr

Answer 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