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>
Je pense que c'est un bug connu et de longue date. Voir ce numéro de GitHub pour plus d'informations.
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/>
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>
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%;
}
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;
};
}
};
});
<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>