Ich habe eine AngularJS-Form. Ich habe Typahead-Skript implementiert, so dass, wenn jemand anfängt, in Eingabefeld einzugeben, die Werte über dem Feld angezeigt werden. Wenn die definierten Werte Banane, Apfel und Bier sind und der Benutzer beginnt, "ba" einzugeben, erscheint die Liste mit dem Wert banana.Stellen Sie eine benutzerdefinierte Eingabevalidierung in Winkelform ein
Wenn der Benutzer auf den Bananenwert von typeahead klickt, wird er per Javascript in das Eingabefeld eingegeben.
Ich möchte das Eingabefeld und das gesamte Formular ungültig machen, wenn der ausgewählte Wert nicht aus der typeahead-Liste stammt.
Ich habe html:
<form id="form" name="form" ng-submit="formsubmit()" novalidate>
<input ng-model="food" ng-required="true" name="food" autocomplete="off" type="text" id="food" placeholder="Start typing" />
<p class="error validationerror" ng-show="form.food.$invalid && form.food.$touched">Required</p>
<div class="error validationerror" ng-messages="form.food.$error"><p ng-message="food">You must specify item from list</p></div>
<button type="submit" id="submit" class="btn large black" ng-disabled="form.$invalid">Submit</button>
</form>
Ich habe Controller:
var app = angular.module('app', ['ngRoute', 'ngMaterial', 'ngMessages', 'angular-loading-bar']);
app.controller('Food', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
$scope.formsubmit = function() {
console.log('submited');
};
$http.get('food.php')
.success(function (data) {
$scope.foods = data;
//typeahead script...
}]);
Inzwischen alles ok funktioniert. Jetzt müssen wir prüfen, ob der Wert des Eingabefeldes in der Lebensmittelliste definiert ist. Egal, ob es eingefügt, getippt oder aus der Typahead-Liste ausgewählt wurde.
I Richtlinie definiert:
app.directive('food', function(){
return {
require: 'ngModel',
link: function(scope, elem, attr, ngModel) {
function updateFoodInfo(scope, elem){
var food1 = $('#food').val();
var data = scope.foods;
if (data.indexOf(food1) < 0) {
ngModel.$parsers.unshift(function (value) {
ngModel.$setValidity('food', data.indexOf(value) === -1);
return value;
});
}
}
setInterval(function(){updateFoodInfo(scope,elem);}, 1000);
}
};
});
ich keine Konsole Fehler haben und was ich geben Sie in Eingabefeld ist Form gültig. Nur wenn ich alles entferne, ist das Formular ungültig und das Eingabefeld wird als ungültig gesetzt, weil es leer ist. Aber ich kann die benutzerdefinierte Validierung einfach nicht festlegen.
Hier funktioniert auch der Plumbing.
leid, aber ich kann es nicht öffnen. Können Sie den Link erneut prüfen? – KondukterCRO
sorry, versuchen Sie es erneut – krutkowski86
mit Winkel 1.5.8 gearbeitet - nicht funktioniert ist mehr mit Winkel 1.6.5 modelValue –