web-dev-qa-db-fra.com

Comment créer un champ de sélection d'interface utilisateur selon les besoins?

Je souhaite définir le champ suivant (paramètres) dans mon formulaire comme champ obligatoire dans. Comment puis-je le faire?

<div class="form-group">
    <label class="col-xs-5 control-label"> Settings*</label>

    <div class="col-xs-7">
        <ui-select multiple tagging="adPreferredEmailDomainPatternTransform" id="emailDomainPatternListInput"
                   tagging-tokens="SPACE|," theme="bootstrap"
                   ng-disabled="settings.enableAuthentication == 'false'"
                   ng-model="settings.emailDomainPatternList">
            <ui-select-match>{{$item.displayFormat}}</ui-select-match>
            <ui-select-choices repeat="item in emailDomainPatterns">
                {{item.displayFormat}}
            </ui-select-choices>
        </ui-select>
    </div>
</div>
htmlangularjs
23
fatCop

Je pense que c'est un bug connu et de longue date. Voir ce numéro de GitHub pour plus d'informations.

5
Kostas Rousis

Aucune des réponses n'a vraiment fonctionné pour moi. Je l'ai résolu en utilisant une simple entrée cachée avec le même modèle-ng que l'interface utilisateur-select et en le validant dans le formulaire.

<input type="hidden" name="email_domain_pattern" ng-model="settings.emailDomainPatternList" required/>
10
Nirav Gandhi

Vous pouvez écrire ng-required = "true".

<div class="form-group">
    <label class="col-xs-5 control-label"> Settings*</label>

    <div class="col-xs-7">
        <ui-select multiple tagging="adPreferredEmailDomainPatternTransform"                 
                   id="emailDomainPatternListInput"
                   tagging-tokens="SPACE|," 
                   theme="bootstrap"
                   ng-disabled="settings.enableAuthentication == 'false'"
                   ng-model="settings.emailDomainPatternList"
                   ng-required="true">
            <ui-select-match>{{$item.displayFormat}}</ui-select-match>
            <ui-select-choices repeat="item in emailDomainPatterns">
                {{item.displayFormat}}
            </ui-select-choices>
        </ui-select>
    </div>
</div>

9
barış çıracı

Vous pouvez définir requis en premier. 

<form name="form">
  <div ng-class="{ 'has-error': form.premise.$touched && form.premise.$invalid }">
    <div class="col-md-3">
      <div class="label-color">PREMISE <span class="red"><strong>*</strong></span></div>
    </div>
    <div class="col-md-9">
      <ui-select name="premise" 
                 id="premise" 
                 ng-required="true" 
                 ng-model="selectedPremise" theme="select2" 
                 ng-disabled="plantregistration.disabled" 
                 class="max-width" title="Choose a premise">
        <ui-select-match 
             placeholder="Select or search a premise...">
             {{$select.selected.name}}
        </ui-select-match>
        <ui-select-choices 
          repeat="person in plantregistration.list12 | filter: {name: $select.search}">
          <div ng-bind-html="person.name | highlight: $select.search"></div>
        </ui-select-choices>
      </ui-select>
      <span ng-show="form.premise.$touched && form.premise.$invalid" 
            class="label-color validation-message">
            Premise is required</span>
    </div>          
  </div>
</form>

Ajouter un peu de SCSS (ou convertir en CSS) comme;

.label-color {
        color: gray;
    }
.has-error {
    .label-color {
            color: red;
        }
        .select2-choice.ui-select-match.select2-default {
            border-color: red;
        }
    }
.validation-message {
        font-size: 0.875em;
    }
.max-width {
        width: 100%;
        min-width: 100%;
    }
2
Mahib

vous pouvez utiliser la directive personnalisée.

angular.module("app").directive('uiSelectRequired', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attr, ctrl) {
            ctrl.$validators.uiSelectRequired = function (modelValue, viewValue) {
                if (attr.uiSelectRequired) {
                    var isRequired = scope.$eval(attr.uiSelectRequired)
                    if (isRequired == false)
                        return true;
                }
                var determineVal;
                if (angular.isArray(modelValue)) {
                    determineVal = modelValue;
                } else if (angular.isArray(viewValue)) {
                    determineVal = viewValue;
                } else {
                    return false;
                }
                return determineVal.length > 0;
            };
        }
    };
});
2
ddagsan
<div class="form-group">
<label class="col-xs-5 control-label"> Settings</label><span class="text-danger"><strong>*</strong></span>

<div class="col-xs-7">
    <ui-select ng-required="true" multiple tagging="adPreferredEmailDomainPatternTransform" id="emailDomainPatternListInput"
               tagging-tokens="SPACE|," theme="bootstrap"
               ng-disabled="settings.enableAuthentication == 'false'"
               ng-model="settings.emailDomainPatternList">
        <ui-select-match>{{$item.displayFormat}}</ui-select-match>
        <ui-select-choices repeat="item in emailDomainPatterns">
            {{item.displayFormat}}
        </ui-select-choices>
    </ui-select>
</div>

0
Suresh Kaushik