2016-04-26 9 views
0

Ich habe eine kleine Angular Validierung, wo ich möchte, dass ein Fehler angezeigt wird, wenn die Eingabe weniger als 3 Buchstaben oder mehr als 6 Buchstaben hat.ng-if funktioniert nicht beim Laden der Seite

Für das, was ich getan habe, wird Fehler nur angezeigt, wenn ich anfange, auf der Eingabe zu tippen, nicht anders, zum Beispiel; Wenn ich die Seite lade und definitiv auf die Seite lade, sind die Eingabe-Zeichen weniger als 3, also sollte es einen Fehler anzeigen, aber es zeigt nur einen Fehler an, wenn ich anfange, bei der Eingabe zu tippen.

mein html:

<form name="someform"> 
<input type="text" ng-model="handle"/> 
<div ng-if="handle.length<lowcharec" class="alert" style="color: red">sorry, maxlength cannot be less than 3 
</div> 
<div ng-if="handle.length>highcharec" class="alert" ng-init="highcharec" style="color: red">sorry, maxlength cannot be greater than 6 
</div> 
<input type="submit"/> 

</form> 

mein Skript:

$scope.lowcharec = 3; 
$scope.highcharec = 6; 

ich etwas MAM fehlt und bin neu zu kantig, pls führen, was ich falsch mache.

+1

Sie haben einige Tippfehler in Ihrem HTML. Außerdem wird ng-init = "highcharec" nichts tun. schließlich ist es immer besser, in controller zu initialisieren: füge ein $ scope.handle = []; – Walfrat

Antwort

0

Sie zeigen keinen vollständigen Code an. Es ist also nicht einfach herauszufinden, was das eigentliche Problem ist. Hier sehen Sie ein funktionierendes Beispiel.

var app = angular.module('app', []); 
 

 
app.controller('FormCtrl', function($scope) { 
 
    $scope.handle = ''; 
 
    $scope.lowcharec = 3; 
 
    $scope.highcharec = 6; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="app"> 
 
    <form name="someform" ng-controller="FormCtrl"> 
 
    <input type="text" ng-model="handle" /> 
 
    <div ng-if="handle.length < lowcharec" class="alert" style="color: red">sorry, maxlength cannot be less than 3 
 
    </div> 
 
    <div ng-if="handle.length > highcharec" class="alert" ng-init="highcharec" style="color: red">sorry, maxlength cannot be greater than 6 
 
    </div> 
 
    <input type="submit" /> 
 

 
    </form> 
 
</body>

+0

danke @niyasc, tut mir leid, dass ich nicht den vollständigen Code zeige, aber was Walfrat gesagt hat, ist richtig. Ich habe $ scope.handle = [] nicht definiert. Habe es einfach gemacht und es zeigt mir den Fehler beim Laden der Seite – user3450590

1

Das ist, weil Ihre handle Variable noch nicht definiert ist, wenn die Seite geladen wird (und so bleibt, bis Sie darin eingeben starten) und undefined < 3 das Ergebnis falsch. Um dies zu beheben, ändern Sie Ihre ng-if zu ng-if="handle.length<lowcharec || !handle".

Verwandte Themen