角度 - 多段階フォーム - 優秀な図書館

val1を$ _POST変数に設定する方法は？これは、ステップ2ではval1がnullであるためです。角度 - 多段階フォーム

$ scope、$ rootScope、angular.copy（）、.val（）を使用しようとしています。

これは私のhtmlコードです：

<html ng-app="myApp"><body> 
    <form action="url.php" method="POST" ng-controller="FormController as vmForm"> 
    <div ng-switch="vmForm.step"> 
    <div class="stepone" ng-switch-when="one"> 

    <label for="val1">Val1</label> 
    <input type="text" name="val1" ng-model="val1"> 

    <button type="button" ng-click="vmForm.stepTwo()"></button> 
    </div> 

    <div class="steptwo" ng-switch-when="two"> 
    <label for="val2">Val2</label> 
    <input type="text" name="val2" ng-model="val2"> 

    <input type="submit" value="Submit"> 
    </body>

<script> 
angular.module('myApp', ['ngAnimate']) 
.controller('FormController', FormController); 

    function FormController($scope) { 
    var vm = this; 
    vm.step = "one"; 
    vm.stepTwo = stepTwo; 

    function stepTwo() { 
    vm.step = "two"; 
} 
}</script>

出典

2017-02-15 Pawells

あなたは運がうまく動いていましたか？あなたが何か他のものが必要な場合は教えてください。 –

これ以上の助けが必要でしたか？ –

それは動作します、私は隠された入力タイプをスキップしたいと思いました。どうも。 – Pawells

$ _POSTは、サーバ上のアクセス可能なPHPの変数です。連想配列としてHTTP POSTリクエストで送信されたペイロードまたはリクエスト本文が含まれています。 Javascript/AngularJSを使用して直接設定することはできません。

あなたのリクエストデータを構築し、フォームアクションエンドポイントに$ http POST要求を行うことができます。ここでは、投稿のコードに基づいて作業例です：http://plnkr.co/edit/C1FGvoDrmzYEFMCwymIG?p=preview

<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
    <script src="script.js"></script> 
    </head> 
    <body ng-app="myApp"> 
    <h1>Hello Plunker!</h1> 
    <form ng-submit="formSubmit()" ng-controller="FormController"> 
     <p>Val1: {{val1}}</p> 
     <p>Val2: {{val2}}</p> 
     <div ng-switch="vm.step"> 
     <div class="stepone" ng-switch-when="one"> 
      <label for="val1">Val1</label> 
      <input type="text" name="val1" ng-model="$parent.val1"> 
      <button type="button" ng-click="stepTwo()">Go to Step two</button> 
     </div> 

     <div class="steptwo" ng-switch-when="two"> 
      <label for="val2">Val2</label> 
      <input type="text" name="val2" ng-model="$parent.val2"> 
      <input type="submit" value="Submit"> 
     </div> 
     </div> 
    </form> 
    </body> 
</html>

script.js

var app = angular.module('myApp', []); 

app.controller('FormController', ['$scope','$http',function ($scope,$http) { 
    $scope.vm = { 
     step : "one" 
    }; 
    $scope.val1 = ""; 
    $scope.val2 = ""; 

    $scope.stepTwo = function() { 
     $scope.vm.step = "two"; 
    } 

    $scope.formSubmit = function() { 
     console.log($scope.val1, $scope.val2); 
     var req = { 
     url : 'url.php', 
     method: 'POST', 
     data : { 
      val1 : $scope.val1, 
      val2 : $scope.val2 
     } 
     }; 

     $http(req).then(function(response) { 
     console.log('success', response); 
     }, function(errorResponse){ 
     console.log('error', errorResponse); 
     }); 
    } 
}]);

出典

2017-02-16 01:35:50

ちょうどあなたのコントローラであるようにすべてを残して、このようなあなたのHTMLを微調整：

<form action="url.php" method="POST" ng-controller="FormController as vmForm"> 
    <div ng-switch="vmForm.step"> 
    <div class="stepone" ng-switch-when="one"> 
     <label for="val1">Val1</label> 
     <input type="text" name="val1" ng-model="vmForm.val1"> 
     <button type="button" ng-click="vmForm.stepTwo()">Goto Step 2</button> 
    </div> 
    <div class="steptwo" ng-switch-when="two"> 
     <input type="hidden" name="val1" value="{{vmForm.val1}}"> 
     <label for="val2">Val2</label> 
     <input type="text" name="val2" ng-model="val2"> 
     <input type="submit" value="Submit"> 
    </div> 
    </div> 
</form>

あなたのコードを微調整するだけで、 "val1"の範囲を "vmForm.val1"に上げているので、ステップ2で "vmForm.val1"を投稿用の隠れた入力フィールドに割り当てることができます。

は、ここでフォームフィールドは、ブラウザのデバッガに掲載されます：

はここPlunkerだ、

http://plnkr.co/edit/3VaFMjZuH09A4dIr1afg?p=previewは、フォームフィールドが掲載されている見るためにあなたのブラウザのデバッガおよびビューのネットワークトラフィックを開きます。

出典

2017-02-16 02:25:07

角度 - 多段階フォーム

答えて

関連する問題