Anwenden von Klasse bei Formularübergabe auf das Div, das das Eingabefeld umschreibt, das ungültig ist

Question

Ich bin neu in Angularjs.Ich mache Formularüberprüfung und ich möchte eine Klasse auf das Div anwenden, die ein Textfeld mit ungültigem Status enthält.

Hier ist mein Code:

<div class="col-sm-9"> 
    <div class="input-group" ng-class="{invalidField:submitted && $scope.signupForm.fname.$Invalid }"> 
     <span class="input-group-addon"> 
      <i class="fa fa-user"></i> 
     </span> 
     <input id="txtFirstName" ng-class="{submitted: submitted}" ng-model="user.FirstName" class="form-control" autofocus="" name="fname" type="text" required> 
    </div> 
    <span ng-show="submitted && signupForm.fname.$error.required">FirstName is required.</span> 
</div> 

<input type="submit" class="btn btn-lg" ng-click="SignUpUser()" value="Sign Up" />  

über die Vorlage von Formular I vorlegt = true.If Vorlage wahr ist und das Feld ist ungültig Ich möchte Klasse invalidField auf dem div anzuwenden, aber es funktioniert nicht.

Answer 1

Das Problem kann sein, dass einer Ihrer Ausdrücke ein verschachteltes Objekt verwendet, aber ich bin mir nicht sicher. Statt mehrere Ausdrücke, verwenden Sie eine Scope-Funktion um den Vergleich zu tun:

<div class="input-group" ng-class="{'invalidField': checkValidity()}"> 

<script> 
$scope.checkValidity = function() { 
    var valid = $scope.submitted && $scope.signupForm.fname.$Invalid; 

    return valid; 
}; 
</script> 

Demo

Diese Demo zeigt, dass die Funktion über den orangefarbenen Hintergrund true zurück.