Angular -multi step form

Как я могу установить переменную val1 в переменную $ _POST? Потому что на шаге 2 val1 является нулевым.Angular -multi step form

Я пытаюсь использовать $ 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.

Что вы можете сделать, это построить свои данные запроса и сделать запрос POST $ http к вашей конечной точке действия формы. Вот рабочий пример, основанный на коде, публикуемую: 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

Angular -multi step form

ответ

Смежные вопросы