在div上对表单提交应用类，该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" />    

在提交表格时，我将submit设置为true。如果提交为true并且字段无效，我想在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>

演示

这个演示显示函数通过橙色背景返回true。