在包含无效输入字段的 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。如果提交为真并且该字段无效，我想在 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

这个demo展示了函数通过橙色背景返回true。