無効な入力フィールドを囲むdivにフォーム提出時にクラスを適用する

Question

私はAngularjsを初めて使っています。フォームの検証をしていて、無効な状態のテキストボックスを含むdivをクラスに適用したいと思います。

は、ここに私のコードです：

<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" />  

私が提出したセットフォームの提出に= true.Ifの提出は真で、フィールドが、私はdiv要素が、その動作していない上のクラスinvalidFieldを適用したい無効です。

Answer 1

問題は、式の中にネストされたオブジェクトを使用している可能性がありますが、それについてはわかりません。代わりに、複数の式の、比較を行うためにスコープの機能を使用します。

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

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

    return valid; 
}; 
</script> 

Demo

このデモは、関数は、オレンジ背景としてtrueを返すことを示しています。