AngularJS多步表单（ui.router）提交

Posted 2023-03-07

【中文标题】AngularJS多步表单（ui.router）提交

【英文标题】：AngularJS multi-step form (ui.router) submission

【发布时间】：2016-06-15 01:00:43

【问题描述】：

我有使用 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 上查看有关该问题的详细信息

任何帮助将不胜感激。

【问题讨论】：

您如何存储表单数据？

您可以更新模型并将其保存在 localStorage 或其他东西中，然后在提交时检索它。然后删除存储:)

@SatejS 你的意思是提交前存储在后端还是前端？

@Alok 感谢您的评论。这是一种安全的好方法吗？

提交之前的前端，我问的原因是因为，是每一步推送数据的表单，等等..

【参考方案1】：

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

在这种情况下，您可以简单地使用 ng-if/ng-show/ng-hide 方法继续下一步。

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

【讨论】：

@Kamal Raj 我不同意，我认为使用路由是实现多步骤表单的好方法。它允许用于在ui-view 中注入视图。请参阅 Satej S scotch.io/tutorials/angularjs-multi-step-form-using-ui-router之前分享的此链接

这个路由器主要是编译过程，这个会在得到ajax调用后解析整个html。然后它会附加，当你每次删除和更新 DOM 时，我们不能保留旧的......否则如果强行想要使用路由，你必须编写像'ui-routing'这样的指令。在这种情况下，您也可以使用以下示例：jsfiddle.net/glenn_antoine/rNudn