javascript - 如果 ng-click 附加到提交按钮，则表单不验证

Question

这是我的表格

<form action="" ng-controller="forgotCtrl as forgot" name="forgotForm">
        <div class="form-group row">
            <label for="email" class="col-sm-2 form-control-label">Email address</label>
            <div class="col-sm-9">
                <input type="email" class="form-control" id="email" placeholder="Email Address" required/>
            </div>
        </div>

        <div class="form-group row">
            <div>
                <button type="submit" class="btn btn-info submitBtn" ng-click="forgotForm.$valid && forgot.redirect()">Submit</button>
            </div>
        </div>
    </form>

电子邮件输入是必填字段，但是 HTML5即使字段为空也会提交表单。仅当 ng-click 时才会发生这种情况事件附于submit按钮。我不明白为什么会发生这种情况。

Controller -

'use strict';

angular.module('app')
    .controller('forgotCtrl', ['$location', function($location) {

    var self = this;

    self.email = document.getElementById("email");

    self.redirect = function () {
        $location.path('/change');
    };
 }]);

Answer 1

使用 ng-submit事件于 form让浏览器检查有效的 HTML5 输入，然后让 Angular 完成它的工作。

<form action="" ng-controller="forgotCtrl as forgot" 
      name="forgotForm" ng-submit="forgotForm.$valid && forgot.redirect()">

参见骗子:http://plnkr.co/edit/hWE34zf2IoBQZlw8Qts0?p=preview

但是浏览器仍然提交表单。这不是 Angular 中应该做的事情(也是 document.getElementById("email") )。

您可能想要删除 type="submit"来自<button>标记并且仅使用 Angular 的 ng-click关于<button>标签。然后 Angular 就可以处理验证并处理表单数据。