如果ng单击附加到提交按钮，则表单未验证

Form not validating if ng-click is attached to the submit button

本文关键字：表单 验证 按钮 提交 单击 ng 如果      更新时间：2023-09-26

这是我的表单

<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按钮时才会发生这种情况。我不明白为什么会发生这种事。

控制器-

'use strict';
angular.module('app')
    .controller('forgotCtrl', ['$location', function($location) {
    var self = this;
    self.email = document.getElementById("email");
    self.redirect = function () {
        $location.path('/change');
    };
 }]);

在form上使用ng-submit事件将让浏览器检查有效的HTML5输入，然后让Angular做它的事情。

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

参见plunker：http://plnkr.co/edit/hWE34zf2IoBQZlw8Qts0?p=preview

但这仍然需要浏览器提交表单。在Angular（也是document.getElementById("email")）中不应该这样做。

您可能想要的是从<button>标记中删除type="submit"，并且仅在<button>标记上使用Angular的ng-click。然后Angular可以处理验证和表单数据。

相关文章：