javascript - 在div上的表单提交上应用类，该类包装了无效的输入字段

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

在提交表单时，我将submitted设置为true。如果submitted为true并且该字段无效，我希望在div上应用类invalidField，但它不起作用。

最佳答案

问题可能是你的一个表达式使用了一个嵌套对象，但我不确定。使用scope函数而不是多个表达式进行比较：

<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。