Question

我有一个分布在多个标签上的表单。最初，我使用了ui-bootstrap的tabset指令，但后来要求深层链接到特定的选项卡，所以我想我会使用ui-router的嵌套视图。

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

的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

Answer 1

你可以尝试按照你所说的方式将某些属性（例如step1，step2等）传递给服务，然后添加true或者你可能使用的任何成功值，所以一旦所有这些属性都为真，在您的ng-disabled或您构建表单的方式中，允许提交。

也许以前的表格步骤可以将输入的值存储在服务的对象中。我想通过这种方式你可以形成一个多页的形式。

Answer 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();
        } 
});

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

2 个答案: