使用 ui-router 模块的 AngularJS 多步表单验证答案

【问题标题】：AngularJS multi-step form validation using ui-router module使用 ui-router 模块的 AngularJS 多步表单验证
【发布时间】：2014-08-26 16:06:39
【问题描述】：

我有一个分布在多个选项卡上的表单。最初，我使用 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>

我开始相信这种方法不适合我的目的。我应该继续使用 tabset 并使用 state 参数来激活相应的选项卡，而不是使用嵌套视图。

我很想知道其他人会如何解决它。

更新 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

【问题讨论】：

标签： angularjs validation angular-ui-router

【解决方案1】：

您可以尝试按照您声明的方式执行此操作，只需将某些属性（如 step1、step2 等）传递给服务，然后添加 true 或您可能使用的任何成功值，因此一旦所有这些属性为 true，在您的 ng-disabled 或您构建表单的方式中，允许提交。

也许在之前的表单步骤中，您可以将输入的值存储在服务中的对象中。我认为通过这种方式您可以创建多页表单。

【讨论】：

感谢您的建议。我已经实现了一个使用服务来管理验证状态的示例，并使用指向它的链接更新了问题。

【解决方案2】：

controller.js

var app = angular.module('employeeDemoApp');
app.controller('employeesCtrl', function($scope, $state, EmployeeService, $stateParams) {
    console.log("Hello")
        $scope.saveEmployee = function(formname){
            console.log(formname.$error)
            EmployeeService.saveEmployee($scope.user);
            $state.go("employees");
        }
        $scope.employeeslist = EmployeeService.getEmployees();
        if($stateParams && $stateParams.id){
            $scope.user = EmployeeService.getEmployee($stateParams.id);
            $scope.user.dob = new Date($scope.user.dob);
            console.log("gdfg", $scope.user)
        }
        $scope.updateEmployee = function(req){
          EmployeeService.updateEmployee($stateParams.id, $scope.user);
          $state.go("employees")
        }
        $scope.goto_new_employee_page = function(){
        $state.go("employees_new")
    }
        $scope.deleteEmployee = function(index){
            console.log("fgdfhdh")
            EmployeeService.deleteEmployee(index);
             $scope.employeeslist = EmployeeService.getEmployees();
        } 
});

【讨论】：

每当您要发布答案时，请同时解释您的代码。