2016-09-22 5 views
0

Я относительно новичок в angularjs.
, когда я пытаюсь отправить форму, ng submit не запускается. Также я не могу получить доступ к $ scope.user, поэтому я не могу отправить сообщение на сервер. Я не уверен, что случилось!ng submit не запускается

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

ответ

0

A) Ваша $scope.reset функция вызывался первым.

B) Ваша функция возврата устанавливает $scope.user на копию user, которая пуста.

Именно поэтому он не работает. Вы удаляете $scope.user, прежде чем у него появится возможность отправить. Таким образом, $scope.user заполняется недопустимыми данными формы.

Просто избавитесь от ng-click в вашей кнопке отправки. И имеют $scope.submit запустить $scope.reset на успех. Похоже, что вы пытаетесь сделать, но это:

$scope.reset; 

должно быть так:

$scope.reset(); 

В обратный вызов.