Форма действительна ui-select AngularJs

Question

Как я могу подтвердить требуемое поле «ui-select»? Поле ввода текста «prénom» в этом изображении работает.

Он не работает со следующим кодом:

   <div class="col-lg-4 col-md-4 col-sm-10 col-xs-12"> 
 
              <ui-select ng-model="role.selected" theme="selectize" name="role" required> 
 
               <ui-select-match placeholder="Selectionnez un rôle">{{$select.selected.titre_role}}</ui-select-match> 
 
               <ui-select-choices repeat="role as role in listeRole"> 
 
                <span ng-bind-html="role.titre_role"></span> 
 
               </ui-select-choices> 
 
              </ui-select> 
 
              <div class="alert alert-danger" style="margin-top:-20px;" ng-show="(f1.role.$dirty|| Submitted) && f1.role.$error.required"><span>Veuillez remplir ce champ</span></div> 
 
             </div>

Спасибо

Answer 1

Видимо вопрос был открыт на GitHub:

https://github.com/angular-ui/ui-select/issues/1226

Вы можете написать custom validator тем временем.

Answer 2

Я бы просто привязал значение, которое вы связываете с ui-select, к скрытому входу.

<div class="col-lg-4 col-md-4 col-sm-10 col-xs-12"> 
 
    <ui-select ng-model="role.selected" theme="selectize"> 
 
     <ui-select-match placeholder="Selectionnez un rôle">{{$select.selected.titre_role}}</ui-select-match> 
 
     <ui-select-choices repeat="role as role in listeRole"> 
 
      <span ng-bind-html="role.titre_role"></span> 
 
     </ui-select-choices> 
 
    </ui-select> 
 
    <!-- 
 
     this will bind to the same value as the ui-select 
 
     and aslo be available to f1 properties 
 
    --> 
 
    <input type="hidden" name="role" ng-model="role.selected" required /> 
 
    
 
    <div 
 
     class="alert alert-danger" 
 
     style="margin-top:-20px;" 
 
     ng-show="(f1.role.$dirty|| Submitted) && f1.role.$error.required" 
 
    > 
 
     <span>Veuillez remplir ce champ</span> 
 
    </div> 
 
</div>