验证必填的 UI 选择字段

Question

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

ng-required="true">

并与

需要

但是由于这些现在都不起作用，我想使用 bootstrap 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
}