AngularJS多步骤表单(ui.router)提交
AngularJS multi-step form (ui.router) submission
我有使用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方法继续下一步。
万事如意...!!如果你愿意,请投票
相关文章:
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- Angular JS/UI Router:为给定状态禁用指令
- 使用AngularJS中的$stateProvider和ui.router
- 带有ui.router的带角度的嵌套视图
- 如何使用AngularJS,Vise和UI Router全局实现身份验证
- 如何使用AngularJS和ui-router从Laravel 5.1获取下载文件
- AngularJS - ui.router - 如何在动态添加它们后重定向到所需的状态
- Angular UI Router-在不了解第二级嵌套视图的情况下更改第三级嵌套视图
- angularjs+ui.router:指令控制器和链接函数之间的不同行为
- AngularJS : ui.router 不显示模板
- [AngularJS][UI Router]在视图中显示视图
- Angular UI Router Resolve在AJAX完成之前未阻止状态更改
- 隐藏空模板,直到使用Restangular和UI Router加载数据
- Angular onEnter ui.router方法无法正常工作
- 如何使用Angular UI Router解析所有状态的数据
- ng模板,带有ui.router,单独的文件
- 使用Angular UI Router,如何使一个状态成为所有状态的子状态
- Angular ui-router resolve promise给出了无限的摘要循环
- AngularJS ui-router:如何全局解析所有路由的典型数据
- 加载视图以查看问题 - AngularJS + ui.router