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

时间:2017-07-13 10:05:48

标签: javascript jquery html angularjs

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

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

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

试试这个条件

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