使用ui-router模块进行AngularJS多步骤验证

发布时间：2020-12-17 09:17:49 所属栏目：安全来源：网络整理

导读：我有一个分布在多个选项卡上的表单.最初,我使用ui-bootstrap的tabset指令,但是后来需要深入链接到一个特定的选项卡,所以我以为我会使用ui-router的嵌套视图. 我所遇到的问题是,父表单仅在所有子表单有效时才有效,但使用ui-router状态时,一次只会加载一个子表

我有一个分布在多个选项卡上的表单.最初,我使用ui-bootstrap的tabset指令,但是后来需要深入链接到一个特定的选项卡,所以我以为我会使用ui-router的嵌套视图.

我所遇到的问题是,父表单仅在所有子表单有效时才有效,但使用ui-router状态时,一次只会加载一个子表单.

Here’s an example to clarify

的index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
  <script src="//code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <script src="script.js"></script>
</head>
<body class="container-fluid">
  <div ui-view>
    <ul class="list-unstyled">
      <li><a ui-sref="edit.basic">Basic</a></li>
      <li><a ui-sref="edit.extended">Extended</a></li>
    </ul>
  </div>
</body>
</html>

的script.js

angular.module('app',['ui.router']).
config(function($stateProvider) {
  $stateProvider.state('edit',{
    abstract: true,url: '/edit/',templateUrl: 'edit.html',controller: function($scope) {
      $scope.model = {};
    }
  }).
  state('edit.basic',{
    url: '/basic',templateUrl: 'basic.html'
  }).
  state('edit.extended',{
    url: '/extended',templateUrl: 'extended.html'
  });
});

edit.html

<div class="row" ng-form="editForm">
  <div class="col-xs-12">
    <ul class="nav nav-tabs">
      <li ui-sref-active="active">
        <a ui-sref="edit.basic">Basic</a>
      </li>
      <li ui-sref-active="active">
        <a ui-sref="edit.extended">Extended</a>
      </li>
    </ul>
  </div>
  <div class="col-xs-12" ui-view></div>
  <div class="col-xs-12">
    <button type="button" class="btn btn-primary" ng-disabled="editForm.$invalid">Save</button>
  </div>
  <div class="col-xs-12">
    <hr>
    <tt>model = {{model}}</tt><br>
    <tt>editForm.$valid = {{editForm.$valid}}</tt><br>
    <tt>editForm.basicForm.$valid = {{editForm.basicForm.$valid}}</tt><br>
    <tt>editForm.extendedForm.$valid = {{editForm.extendedForm.$valid}}</tt>
  </div>
</div>

basic.html

<div ng-form="basicForm">
  <div class="form-group">
    <label for="textProperty">Text Property</label>
    <input type="text" class="form-control" name="textProperty" id="textProperty" ng-model="model.textProperty" required>
  </div>
</div>

extended.html

<div ng-form="extendedForm">
  <div class="form-group">
    <label for="numericProperty">Numeric Property</label>
    <input type="number" class="form-control" name="numericProperty" id="numericProperty" ng-model="model.numericProperty" required>
  </div>
  <div class="form-group">
    <label for="dateProperty">Date Property</label>
    <input type="date" class="form-control" name="dateProperty" id="dateProperty" ng-model="model.dateProperty" required>
  </div>
</div>

我开始相信这种做法不适合我的目的.而不是使用嵌套视图,我应该继续使用该选项卡并使用一个状态参数来激活相应的选项卡.

我有兴趣知道别人如何解决它.

更新1：

Here is one solution I came up with that uses the ui-bootstrap tabset but doesn’t use nested ui-router states and instead parameterises the active tab.

更新2：

Here is a solution which uses nested states along with a validator service following the suggestion of Santiago Rebella

更新3：

Here is an alternate solution to update 2 which uses a validator object on the parent state’s scope for comparison

你可以尝试这样做,就像你所说的那样,把一些属性像step1,step2等传递给一个服务,并且添加一些真正的,或者你可以使用的任何成功的价值,所以一旦这些属性都是真的,在你的ng被禁用或您正在构建表单的方式被允许提交.

也许以前的表单可以将输入的值存储在服务中的对象中.我认为这样你可以一个多页的形式.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!