Question

我在表单的提交按钮中使用ng-disabled。当我填写字段时，inputForm。$ valid应该为true，ng-enable应该得到这个真值，从而启用按钮。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="">

    <form name="inputForm" >
        <div>
            <label>Name</label>
            <input type="text" name="name" required />
        </div>
        <div>
            <label>Email</label>
            <input type="text" name="email" required/>
        </div>

        <button type="submit" ng-disabled="{{inputForm.$valid}}">
            Submit
        </button>
    </form>

    {{inputForm.$valid}}
    {{inputForm.$invalid}}
    {{inputForm.$dirty}}
    {{inputForm.$pristine}}
</body>
</html>

但即使键入字段，按钮也不会启用。我做错了什么？

Answer 1

您应该使用：

ng-disabled="inputForm.$invalid"

以便在表单无效时禁用表单。请注意，您不能将无效属性放在括号中。

完整<form>代码：

<form name="inputForm" >
    <div>
        <label>Name</label>
        <input type="text" name="name" required />
    </div>
    <div>
        <label>Email</label>
        <input type="text" name="email" required/>
    </div>

    <button type="submit" ng-disabled="inputForm.$invalid">
        Submit
    </button>
</form>

Answer 2

将ng-disabled="inputForm.$valid更改为ng-disabled="inputForm.$invalid或ng-disabled="!inputForm.$valid，您在表单有效时禁用该按钮

使用ng-disabled启用/禁用按钮

2 个答案: