Vielen Dank an @farincz für eine großartige Antwort. Hier sind einige Änderungen, die ich vorgenommen habe, um sie an meinen Anwendungsfall anzupassen.
Diese Version enthält drei Anweisungen:
bs-has-successbs-has-errorbs-has (eine Annehmlichkeit, wenn Sie die anderen beiden zusammen verwenden möchten)
Von mir vorgenommene Änderungen:
- Es wurde eine Überprüfung hinzugefügt, um nur die Status anzuzeigen, wenn das Formularfeld fehlerhaft ist, dh sie werden erst angezeigt, wenn jemand mit ihnen interagiert.
- Die übergebene Zeichenfolge wurde
element.find()für diejenigen geändert, die jQuery nicht verwenden, da element.find()in Angulars jQLite nur das Suchen von Elementen anhand des Tagnamens unterstützt wird.
- Unterstützung für Auswahlfelder und Textbereiche hinzugefügt.
- Umhüllt das
element.find()in a $timeout, um Fälle zu unterstützen, in denen die Elemente des Elements möglicherweise noch nicht im DOM gerendert wurden (z. B. wenn ein untergeordnetes Element des Elements mit markiert ist ng-if).
- Der
ifAusdruck wurde geändert , um die Länge des zurückgegebenen Arrays zu überprüfen ( if(input)aus der Antwort von @ farincz wird immer true zurückgegeben, da die Rückgabe von element.find()ein jQuery-Array ist).
Ich hoffe jemand findet das nützlich!
angular.module('bs-has', [])
.factory('bsProcessValidator', function($timeout) {
return function(scope, element, ngClass, bsClass) {
$timeout(function() {
var input = element.find('input');
if(!input.length) { input = element.find('select'); }
if(!input.length) { input = element.find('textarea'); }
if (input.length) {
scope.$watch(function() {
return input.hasClass(ngClass) && input.hasClass('ng-dirty');
}, function(isValid) {
element.toggleClass(bsClass, isValid);
});
}
});
};
})
.directive('bsHasSuccess', function(bsProcessValidator) {
return {
restrict: 'A',
link: function(scope, element) {
bsProcessValidator(scope, element, 'ng-valid', 'has-success');
}
};
})
.directive('bsHasError', function(bsProcessValidator) {
return {
restrict: 'A',
link: function(scope, element) {
bsProcessValidator(scope, element, 'ng-invalid', 'has-error');
}
};
})
.directive('bsHas', function(bsProcessValidator) {
return {
restrict: 'A',
link: function(scope, element) {
bsProcessValidator(scope, element, 'ng-valid', 'has-success');
bsProcessValidator(scope, element, 'ng-invalid', 'has-error');
}
};
});
Verwendung:
<div class="form-control" bs-has>
<label for="text"></label>
<input
type="text"
id="text"
name="text"
ng-model="data.text"
required>
</div>
<div class="form-control" bs-has-success>
<label for="select"></label>
<select
id="select"
name="select"
ng-model="data.select"
ng-options="option.name for option in data.selectOptions"
required>
<option value="">-- Make a Choice --</option>
</select>
</div>
<div class="form-control" bs-has-error>
<label for="textarea"></label>
<textarea
id="textarea"
name="textarea"
ng-model="data.textarea"
required></textarea>
</div>
Sie können auch das Laubenpaket von Guilherme installieren , das all dies zusammen bündelt.