表格有效 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>

表格有效 ui-select AngularJs

form valid ui-select AngularJs

angularjs

ui-select