Question

当我为提交按钮添加ng-disabled指令的附加检查时，以下代码（取自W3Schools）不起作用。我想使用＆＃34; myForm.email。$ untouched＆＃34;同样，当有人立即进入页面并且该字段为空时，禁用提交按钮。但是当我添加它时，我必须单击某处，然后才启用该按钮。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

    <h2>Validation Example</h2>

    <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>

        <p>Email:
            <br>
            <input type="email" name="email" ng-model="email" required>
            <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
    <span ng-show="myForm.email.$error.required">Email is required.</span>
            <span ng-show="myForm.email.$error.email">Invalid email address.</span>
            </span>
        </p>

        <p>
            <button ng-disabled="myForm.email.$dirty && myForm.email.$invalid">Absenden</button>
        </p>

    </form>

    <script>
        var app = angular.module('myApp', []);
        app.controller('validateCtrl', function($scope) {
            $scope.user = 'John Doe';
            $scope.email = '';
        });
    </script>

</body>

</html>

想要将代码更改为此但它无法正常工作（必须单击某处）：

<p>
<button
ng-disabled="myForm.email.$untouched || myForm.email.$dirty && myForm.email.$invalid">Absenden</button>
</p>

Answer 1

你必须改变

<p>
<button
ng-disabled="myForm.email.$untouched || myForm.email.$dirty && myForm.email.$invalid">Absenden</button>
</p>

要

<p>
<button
ng-disabled="myForm.email.$dirty && myForm.email.$invalid || myForm.email.$pristine">Absenden</button>
</p>

Answer 2

试试这个条件

<p>
    <button ng-disabled="myForm.email.$touched && myForm.email.$dirty && myForm.email.$invalid">Absenden</button>
</p>

AngularJS表单验证无法按预期工作

2 个答案: