如何让我的联系表格与angularJS一起使用？

Question

我正在尝试将AngularJS与我的联系表单集成。当我测试验证是否有效或如果表单为空时将触发警告消息，它会提交，但它似乎只是刷新浏览器。

这是我的HTML：

<form ng-controller="ContactController" ng-submit="submit(contactform)" name="contactform" method="post" action="" class="form-horizontal" role="form" novalidate>

    <div class="form-group uk-form-row" ng-class="{ 'has-error': contactform.inputName.$invalid && submitted }">
    <label for="inputName" class="uk-form-label control-label">Your Name</label>
           <div class="uk-form-controls">
               <input ng-model="formData.inputName" type="text" placeholder="Please enter your name" class=" form-control uk-width-1-1" id="inputName" name="inputName" required>
           </div>
   </div>

    <div class="form-group uk-form-row" ng-class="{ 'has-error': contactform.inputEmail.$invalid && submitted }">
        <label for="inputEmail" class="uk-form-label control-label">Your Email!</label>
             <div class="uk-form-controls">
             <input ng-model="formData.inputEmail" type="email" class="form-control uk-width-1-1" id="inputEmail" name="inputEmail" placeholder="Please enter your email" required>
        </div>
   </div>
   <div class="form-group uk-form-row" ng-class="{ 'has-error': contactform.inputSubject.$invalid && submitted }">
       <label for="inputSubject" class="uk-form-label control-label">Subject</label>
       <div class="uk-form-controls">
        <input ng-model="formData.inputSubject" type="text" class="form-control" id="inputSubject" name="inputSubject" placeholder="Subject Message" required>
       </div>
 </div>
  <div class="form-group uk-form-row" ng-class="{ 'has-error': contactform.inputMessage.$invalid && submitted }">
     <label for="inputMessage" class="uk-form-label control-label">Message</label>
     <div class="uk-form-controls">
     <textarea ng-model="formData.inputMessage" class="form-control" cols="100" rows="9" id="inputMessage" name="inputMessage" placeholder="Your message..." required></textarea>
   </div>
 </div>
 <div class="uk-form-row">
     <div class="uk-form-controls">
           <button class="uk-button uk-button-primary" type="submit" ng-disabled="submitButtonDisabled">Submit</button>
     </div>
 </div>
 <div class="uk-form-row">
    <div class="uk-form-controls">
           <p ng-class="result" style=" font-weight:bold; padding: 15px; margin: 0;">{{ resultMessage }}</p>
   </div>
</div>

这是我的JS（角度）：

rustyApp.controller('ContactController', function($scope, $http) {
    $scope.result = 'hidden'
    $scope.resultMessage;
    $scope.formData; led = false;
    $scope.submitted = false;
    $scope.submit = function(contactform) {
    $scope.submitted = true;
    $scope.submitButtonDisabled = true;
         if (contactform.$valid) {
        $http({
            method: 'POST',
            url: '../partials/mailer.php',
            data: $.param($scope.formData), //param method from jQuery
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            } 
        }).success(function(data) {
            console.log(data);
            if (data.success) { //success comes from the return json object
                $scope.submitButtonDisabled = true;
                $scope.resultMessage = data.message;
                $scope.result = 'bg-success';
                if ($scope.result === 'bg-success') {
                    $scope.class = "bg-success";
                }
                // if($scope.result){setTimeout(window.location.reload(true),4000);}
                if ($scope.result) {
                    setTimeout(function() {
                        window.location.reload(true)
                    }, 4000);
                }
            } else {
                $scope.submitButtonDisabled = false;
                $scope.resultMessage = data.message;
                $scope.result = 'bg-danger';
            }
        });
    } else {
        $scope.submitButtonDisabled = false;
        if ($scope.submitButtonDisabled) {
            $scope.class = "bg-danger";
        }
        $scope.resultMessage = 'Failed Please fill out all the fields.';
        $scope.result = 'bg-danger';
    }
}
});

更新12月15日下午7:20

这是我在遵循Sunil的建议后得到的错误：

更新12月16日下午7:12

Answer 1

如果您希望AngularJS提交表单，则不应使用action标记上的<form>属性（也不需要method属性）。 form指令的documentation中提到了这一点。

那里还有很多其他代码，所以我可能错过了其他可能存在问题的东西。但是action属性的存在（我假设它是空的）是导致表单被浏览器提交的原因。