html - ng提交没有被触发

Question

我对 angularjs 比较陌生。
当我尝试提交表单时，ng submit 没有被触发。我也无法访问 $scope.user 因此我无法发布到服务器。我不确定出了什么问题！

<div ng-controller="contactController">
                <form name="myForm" class="form-horizontal" role="form" ng-submit="submit()">
                    <div class="form-group">
                        <label for="company" class="col-md-4 control-label">Company Name</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="company" placeholder="Company Name" ng-model="user.company" required> </div>
                    </div>
                    <div class="form-group">
                        <label for="firstName" class="col-md-4 control-label">First Name</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="firstName" placeholder="First Name" ng-model="user.firstname" required> </div>
                    </div>
                    <div class="form-group">
                        <label for="lastName" class="col-md-4 control-label">Last Name</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="lastName" placeholder="Last Name" ng-model="user.lastname" required> </div>
                    </div>
                    <div class="form-group" ng-class="{'has-error': myForm.phone.$error.number}">
                        <label for="tel" class="col-md-4 control-label">Phone Number</label>
                        <div class="col-md-4">
                            <input type="number" class="form-control" id="phone" placeholder="Phone Number" ng-minlength="10" ng-maxlength="10" ng-model="user.phone" ng-required="true" name="phone"> <span class="help-block" ng-show="myForm.phone.$error.required || 
                               myForm.phone.$error.number">
                               Valid phone number is required
                </span> <span class="help-block" ng-show="((myForm.phone.$error.minlength ||
                               myForm.phone.$error.maxlength) && 
                               myForm.phone.$dirty) ">
                               phone number should be 10 digits
                </span> </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-md-4 control-label">Email</label>
                        <div class="col-md-4">
                            <input type="email" class="form-control" id="email" placeholder="Email" ng-model="user.email" name="input" required> <span class="error" ng-show="myForm.input.$error.required">
                                Required!</span> <span class="error" ng-show="myForm.input.$error.email">
                                Not valid email!</span> </div>
                    </div>
                    <div class="form-group">
                        <label for="comments" class="col-md-4 control-label">Comments</label>
                        <div class="col-md-4">
                            <textarea id="text" class="form-control" placeholder="Comments" cols=10 ng-model="user.comments"></textarea>
                        </div>
                    </div>
                    <!--<div class="form-group">
                    <div class="g-recaptcha pull-right" data-sitekey=""></div></div>-->
                    <div class="form-group">
                        <div class="col-md-4">
                            <button type="submit" class="btn btn-success" ng-click="reset()">Submit</button>
                        </div>
                    </div>
                </form>
            </div>

我的控制器：

myApp.controller('contactController', ['$scope', '$http', function ($scope, $http) {
    //$.getScript("https://www.google.com/recaptcha/api.js");
    var user = {
        "company": ""
        , "firstname": ""
        , "lastname": ""
        , "phone": ""
        , "email": ""
        , "comments": ""
    };
    $scope.submit = function () {
        console.log($scope.user);
        $http({
            method: 'POST'
            , url: '/contactUs'
            , data: $scope.user, //forms user object
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).success(function (data) {
            console.log('Got a response');
            $scope.reset;
        }).error(function (data) {
            console.log("error detected");
        });
    }
    $scope.reset = function () {
        $scope.user = angular.copy(user);
        $scope.myForm.$setPristine();
        $scope.myForm.$setUntouched();
    }
}]);

Answer 1

A）您的$scope.reset函数首先被调用。

B）您的重置功能设置$scope.user为 的副本user，该副本为空白。

这就是它不起作用的原因。$scope.user在它有机会提交之前，您正在消隐。因此，$scope.user填充了无效的表单数据。

只需摆脱提交按钮中的 ng-click 即可。并已成功$scope.submit运行$scope.reset。看起来您正在尝试这样做，但是：

 $scope.reset;

需要是这样的：

 $scope.reset();

在成功回调中。