在 Angularjs 验证为真后，进行普通表单提交

After Angularjs validation is true do a normal form submit

本文关键字：表单提交 Angularjs 验证      更新时间：2023-09-26

我正在一个需要通用HTTP POST的现有Web应用程序上实现AngularJS，就像没有AngularJS一样。

有没有人有解决方法？我尝试设置操作="#"和操作="."和只是操作，然后做一些jQuery来注入这样的操作。但没有任何效果

<script type="text/javascript">
    $("form").get(0).setAttribute( "action", "test.html" );
</script>

这是我的表单和代码 我的表格

<form name="userForm" ng-submit="submitForm(userForm.$valid)" xt-form novalidate>
                        <div class="form-group">
                            <div class="col-sm-6" ng-class="{ 'has-error' : userForm.fornavn.$invalid && !userForm.fornavn.$pristine }">
                                <label class="control-label" for="textinput">Fornavn <span class="star-color">*</span></label>
                                <input autocomplete="off" type="text" value="<?php echo set_value('fornavn'); ?>" name="fornavn" ng-model="userFormData.fornavn" class="form-control" xt-validate msg-required="Du skal udfylde dit Fornavn" required>
                            </div>
                            <div class="col-sm-6" ng-class="{ 'has-error' : userForm.efternavn.$invalid && !userForm.efternavn.$pristine }">
                                <label class=" control-label" for="textinput">Efternavn <span class="star-color">*</span></label>
                                <input autocomplete="off" type="text" value="<?php echo set_value('efternavn'); ?>" name="efternavn" ng-model="userFormData.efternavn" class="form-control" xt-validate msg-required="Du skal udfylde dit Efternavn" required>
                            </div>
                        </div>
            <button  id="membership-box__payBtn" type="submit" ng-model="userFormData.betaling" name="betaling" class="btn btn-success text-uppercase">Gå til betaling</button>

</form>

//CODEIGNITER CONTROLLER
if (isset($_POST['betaling'])) {

$data['tilBetaling'] = array(
'oprettelse'        => $this->input->post('oprettelse'),
//                'medlemskab'        => $this->input->post('medlemskab'),
'tilBetaling'       => str_replace(',', '.', $this->input->post('tilBetaling')),
'pr_maaned'         => $this->input->post('pr_maaned'),
'start_date'        => $this->input->post('start_date'),
'til_dato'          => $this->input->post('til_dato'),
'pakke'             => $this->input->post('pakke'),
'type'              => $this->input->post('medlemskabTypeFinal'),
'getCenter'         => $this->input->post('getCenter'),
'medlemskabPakkePID'=> $this->input->post('medlemskabPakkePID'),
'ekstraInput'       => $this->input->post('ekstraInput'),
'periode_price'     => $this->input->post('periode_price'),
'kampagneTag'       => $this->input->post('kampagneTag'),
//                'header'            => $this->input->post('header'),
);

//Gem array til session
$_SESSION['betaling'] = $data['tilBetaling'];
}

如果你想做一个普通的提交，你可以在你的控制器中处理ngClick：

.HTML 

<div ng-controller="ctrl">
    <form name="userForm" action="user/add" method="post">
         Name: <input name="name" ng-model="user.name" />
         ...
         <button ng-click="onSubmit(userForm)">Submit</button>
    </form>
</div>

.JS

app.controller('ctrl', function($scope) {
   $scope.onSubmit = function(form) {
       if (form.$valid) {
           var e = document.getElementsByName(form.$name);
           e[0].submit();
       }
   }
});

替代解决方案

作为替代方案，请考虑利用服务，并在 AngularJS 中成功开机自检后重定向。

.HTML

<div ng-controller="ctrl">
    <form name="userForm" ng-submit="onSubmit(user)">
         Name: <input name="name" ng-model="user.name" />
         ...
         <button type="submit">Submit</button>
    </form>
</div>

.JS

app.factory('UserService', function($http) {
     return {
        addUser: function(user) {
           return $http({method:'POST', url:'api/user/add', data: user });
        }
     }
});
app.controller('ctrl', function($scope, $location, UserService) {
   $scope.onSubmit = function(user) {
       if ($scope.userForm.$valid) {
            UserService.addUser(user).success(function() {                    
                $location.path('/user/addSuccessful')
            });
       }
   }
});

即使您执行 AngularJs 提交，请求也不会转到服务器。控件仍保留在客户端。然后，您可以通过$http服务发布数据/表格等。您可以在控制器中注入$http服务。如 

app.controller('reviewCtrl', ['$http', function($http){
        $scope.addReview = function(product){
        //use $http service here
        // Simple POST request example (passing data) :
        $http.post(' / someUrl ', {msg:' hello word!'}).
          success(function(data, status, headers, config) {
            // this callback will be called asynchronously
            // when the response is available
          }).
          error(function(data, status, headers, config) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
          });
        }
        }]);

注意：请在运行代码之前查看语法。

要仅在 Angular 验证通过或通过后提交 Angular Js 表单，您必须在 ng-submit 中使用reviewForm.$valid标志 chuck。

使用此标志检查，在通过所有验证之前，不会提交表单。

<form name="reviewForm" ng-controller="reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
....
....
</form>
相关文章：