Angular.js - ng-disabled在复选框上，仍然提交一个有效的表单

Angular.js - ng-disabled on checkbox and still submit a valid form?

本文关键字：一个 表单 有效 提交 ng-disabled js 复选框 Angular      更新时间：2023-09-26

我正在使用angular.js并试图在实际提交之前验证表单。这是目前为止我的HTML:

<form name="form" class="css-form" novalidate>
    <table>
        <tr>
            <td>
                <input type="text" ng-model="branch.phone_number" name="uPhone" required="" />
                <br />
                <div ng-show="form.$submitted || form.uPhone.$touched">
                    <div ng-show="form.uPhone.$error.required">Insert phone number!</div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" ng-model="branch.approved" ng-checked="branch.approved === 1" required="" ng-disabled="checkUser()" />
            </td>
        <tr/>
        <tr>
            <td align="right">
                <input type="button" ng-click="reset()" value="Reset" />
            </td>
        <tr/>
        <tr>
            <td align="left">
                <input type="submit" ng-click="form.$valid && save()" value="Save" />
            </td>
        </tr>
    </table>
</form>

这是checkUser函数:

    $scope.checkUser = function() {
        return (user.get().is_admin === 1) ? false : true;
    };

基本上，如果ng-model="branch.approved"不真实，表单将不允许提交。如果我删除ng-disabled属性，表单就会提交。

发生了什么事?如何解决?谢谢!

您的复选框是required -当控件被禁用时，它不设置任何值。

从input type="checkbox"中删除required=""属性，它应该像您期望的那样工作

try this:

使用ng-disabled="user.is_admin"，然后像这样使用ng-change复选框ng-change="checkUser()"

将函数更改为

$scope.checkUser = function() {
    $scope.user = user.get();
};

我猜用户的admin状态可以在表单生命周期中改变…否则你不需要change事件，只需使用ng-disabled="user.is_admin"并初始化控制器内的user对象

相关文章：