Подтвердите обязательное поле ui-select

Question

Я новичок в работе с angular, и мне нужен способ проверки поля ui-select, я пробовал с

ng-required = "true"

и с

требуемым

Но так как сейчас ничего из этого не работает, я хочу использовать загрузочный класс has-error, чтобы показать, что поле является обязательным, это моекод.

<div class="form-group">
<div ng-class="{'has-error': !project.parentOrganization || project.parentOrganization == ''}">
<ui-select ng-model="project.parentOrganization" theme="bootstrap" reset-search-input="true" tabindex="4" ng-required="true" id="{{'itopOrganizationId' + $index}}" required>
  <ui-select-match placeholder="Seleccione una organización padre">{{$select.selected.name}}</ui-select-match>
  <ui-select-choices repeat="value.id as value in parentOrganizations | filter: {name: $select.search} | orderBy:'name'">
    <div ng-bind-html="value.name | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

И это часть моего контроллера

    $scope.saveProject = function () {

  if(!$scope.project.parentOrganization || $scope.project.parentOrganization == ""){
    return
 } 

Теперь проблема в том, что, когда модал появляется, он уже отмечен красным, янужно сделать это после нажатия кнопки отправки.

Что мне делать?У вас есть лучший способ реализовать это?

Answer 1

Сделайте такую ​​форму

<form ng-form="example" novalidate>
<div class="form-group">
<div ng-class="{'has-error': example.project.parentOrganization.$invalid && !example.project.parentOrganization.$pristine}">
<ui-select name="project.parentOrganization" ng-model="project.parentOrganization" theme="bootstrap" reset-search-input="true" tabindex="4" ng-required="true" id="{{'itopOrganizationId' + $index}}" required>
  <ui-select-match placeholder="Seleccione una organización padre">{{$select.selected.name}}</ui-select-match>
  <ui-select-choices repeat="value.id as value in parentOrganizations | filter: {name: $select.search} | orderBy:'name'">
    <div ng-bind-html="value.name | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>
</form>

и в вашем контроллере

$scope.example={}
$scope.saveProject = function () {

  if(!$scope.project.parentOrganization || $scope.project.parentOrganization == ""){
      $scope.example.project.parentOrganization.$pristine=false; 
      return
    }