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

Shorn Jacob 发表于 Dev

肖恩·雅各布

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

<!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>

但是即使在输入字段时也无法启用该按钮。我在做什么错呢？

蒂姆·比格莱森（Tim Biegeleisen）

您应该使用：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。