javascript - AngularJS 多步表单(ui.router)提交

Question

我有使用 ui.router 的多步骤 AngularJs 表单，见下侧:

signup.config(function($stateProvider, $urlRouterProvider,$locationProvider) {

  $stateProvider

    // route to show our basic form (/form)
    .state('signup', {
        url: '/signup',
        templateUrl: './stepOne.ejs',
        controller: 'login'
    })

    // nested states 
    // each of these sections will have their own view
    .state('signup.form', {
        url: '/form',
        templateUrl: './stepTwo.ejs'

    })

    .state('signup.interests', {
        url: '/interests',
        templateUrl: './stepThree.ejs'
    })

     $urlRouterProvider.otherwise('/signup/form');
});

正如您所见，表单在提交之前需要执行多个步骤。每一步都有自己的看法。

最初我只有一个单页表单，我将表单提交到我的 API，如下所示:

<form name="myForm" action="/signup" method="POST">

上面的方法对于单页表单非常有效但是这不适用于多步骤表单。

原因我认为，当单击表单最后一步的提交按钮时，提交按钮无法访问之前表单步骤/页面中的用户输入。服务器/API 需要 POST 请求中的所有用户输入，因此它会被拒绝。

所以我的问题是如何使用 <form action="/signup" method="POST"> 提交 AngularJS 多步骤(ui.router)表单

我已经尝试过通过 Angular $http POST 函数发布表单，但这不允许我使用 Passport.js 在服务器端重定向用户。您可以在我的 SO question 上查看有关该问题的详细信息

任何帮助将不胜感激。

Answer 1

这个逻辑是完全错误的，如果你想在 UI 中使用多步表单，你不应该使用路由，因为移动到下一个表单(下一个 url)，旧的表单将从 DOM 中删除，所以你不能保留已经输入的值。

在这种情况下，您只需使用 ng-if/ng-show/ng-hide 方法即可继续下一步。

祝一切顺利...!!!喜欢就投票吧