Question

我正在尝试提交表单，但值始终为空。

我的HTML：

     <form novalidate name="creditCardForm" id="creditCardForm" method="POST">
            <input type="hidden" name="EPS_MERCHANT" value="{{credit.data.merchantId}}">
            <input type="hidden" name="EPS_TIMESTAMP" value="{{credit.data.currentGMTTimestamp}}">
            <input type="hidden" name="EPS_TYPE" value="{{credit.data.epsType}}">

            <div class="text-center">
                <button class="btn btn-primary" ng-click="credit.save()">Save</button>
            </div>
        </form>

和我的js部分：

function save(){
    document.getElementById("creditCardForm").setAttribute("action", this.data.crnUrl)
    document.forms["creditCardForm"].submit()
}

从检查中，这些字段都有值

但是从请求中，这些字段都是空的：

更新我的问题：因为这是一个特殊的表单帖子，它将调用NAB bank api来验证某些内容，所以我不能将每个字段放入一个对象并执行ajax / $ resource / $ http调用。感谢

Answer 1

这是一种通过action属性提交表单的非角色方式。使用ng-submit表单属性并发出$http.post请求异步。

    <form novalidate name="creditCardForm" id="creditCardForm" 
          ng-submit="saveCredit(creditCardForm)">

        <!-- no input hidden -->

        <div class="text-center">
            <button class="btn btn-primary">Save</button>
        </div>
    </form>

你不需要以这种方式隐藏输入。

Answer 2

如果我的问题和您的要求正确无误。你应该使用以下方式：

<form novalidate name="creditCardForm" id="creditCardForm" method="POST">
            <input type="hidden" name="EPS_MERCHANT" ng-model="credit.data.merchantId">
            <input type="hidden" name="EPS_TIMESTAMP" ng-model="credit.data.currentGMTTimestamp">
            <input type="hidden" name="EPS_TYPE" ng-model="credit.data.epsType">

            <div class="text-center">
                <button class="btn btn-primary" ng-click="credit.save(credit.data)">Save</button>
            </div>
        </form>

这假设credit是控制器的别名。

我试图保持ng-click方式在控制器上调用方法。但是对于有角度的表单，您也可以通过ng-submit指令执行相同的操作。

在您的控制器中，您将拥有以下内容：

$scope.save = function(data){

   //use data here as you like
   //data.merchantId and other fields
}

If you are using alias form, then use:
//vm or any other name you have for your `this` instance
vm.save = function(){

   // use data here as you like
}

Answer 3

我想尝试解决您的问题。您要做的第一件事是在表单中添加ng-model和ng-value。例如：

视图：

<form novalidate name="creditCardForm" id="creditCardForm" ng-submit="save()">
    <input type="hidden" ng-model="credit_card.eps_merchant" name="eps_timestamp" ng-value="{{credit.data.merchantId}}">
    <input type="hidden" ng-model="credit_card.eps_timestamp" name="eps_timestamp" ng-value="{{credit.data.currentGMTTimestamp}}">
    <input type="hidden" ng-model="credit_card.eps_type" name="eps_type" ng-value="{{credit.data.epsType}}">

    <div class="text-center">
        <button type="submit" class="btn btn-primary">Save</button>
    </div>
</form>

下一步你可以创建控制器。例如：角度控制器：

angular.module('cartApp')
.controller('AddCreditCartCtrl', [
'$scope',
'$location',
'$http',
function($scope, $location, $http) {
    $scope.credit_card = {};
    $scope.credit.data = {
        merchantId: 'your-merchant-id',
        currentGMTTimestamp: 'your-currentGMTTimestamp',
        epsType: 'your-epsType'
    }

    $scope.save = function () {
        $http.post('/yourUrl', {credit_card: $scope.credit_card}).then(function(res){
            // Successfully create data
        },
        function(response) {
            // Failed to create data
        });
    }
}]);

我希望这可以帮到你。：）

Answer 4

谢谢上面的每一个人。只是想分享根本原因

我有一个名为<credit-card></credit-card>的指令，在这个指令中，我有一个表单，其名称和id都是creditCardForm，所以当这个指令在几个地方使用时，控制器我使用document.forms["creditCardForm"]，js不知道哪个是目标形式，这导致请求中的空值

希望它可以帮助有同样问题的人

js表单提交无效

4 个答案: