Question

我对angularjs比较陌生当我尝试提交表单时，ng提交没有被触发。此外，我无法访问$ 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();

成功回调。

提交未被触发

1 个答案: