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

AngularJS multi-step form (ui.router) submission

本文关键字:ui router 提交 表单 AngularJS      更新时间:2023-09-26

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

任何帮助将不胜感激。

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

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

万事如意...!!如果你愿意,请投票