验证 required ui-select 字段

Question

我是 angular 的新手，我需要一种方法来验证 ui-select 字段，我已经尝试过

ng-required="true"

并与

requiered

但是由于 none 这些工作现在我想使用 bootstrap has-error class 来显示该字段是 required，这是我的代码。

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

验证 required ui-select 字段

Validate required ui-select field

angularjs

twitter-bootstrap

ui-select