javascript - 在包装无效输入字段的 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" />    

在提交表单时，我设置了 submitted = 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>

Demo

此演示显示该函数通过橙色背景返回 true。