表格未验证ng-click是否附加到提交按钮

时间:2016-05-09 21:24:18

标签: javascript html angularjs forms

这是我的表格

<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');
    };
 }]);

1 个答案:

答案 0 :(得分:0)

使用func validateUrl (urlString: String?) -> Bool { let url:NSURL = NSURL(string: urlString!)! if NSWorkspace.sharedWorkspace().openURL(url) { return true } return false } print (validateUrl("http://google.com")) 上的ng-submit事件会让浏览器检查有效的HTML5输入,然后让Angular执行此操作。

form

请参阅plunker:http://plnkr.co/edit/hWE34zf2IoBQZlw8Qts0?p=preview

但是仍然有浏览器提交表单。这不是应该如何在Angular中完成的(也是<form action="" ng-controller="forgotCtrl as forgot" name="forgotForm" ng-submit="forgotForm.$valid && forgot.redirect()"> )。

您可能希望从document.getElementById("email")代码中移除type="submit"使用<button>代码上的Angular ng-click。然后Angular可以处理验证并处理表单数据。