Усиленная многоуровневая проверка по AngularJS с использованием модуля ui-router

У меня есть форма, которая распространяется по нескольким вкладкам. Первоначально я использовал директиву tabset из ui-bootstrap, но затем требовалось глубокую ссылку на конкретную вкладку, поэтому я думал, что буду использовать вложенные представления из 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>

Я начинаю считать, что этот подход не подходит для моей цели. Вместо использования вложенных представлений я должен продолжать использовать табуляцию и использовать параметр состояния для активации соответствующей вкладки.

Мне интересно узнать, как другие решат это.

ОБНОВЛЕНИЕ 1:

Вот одно из решений, которое я использовал, используя элемент ui-bootstrap, но не использует вложенные состояния ui-router и вместо этого параметризует активную вкладку.

ОБНОВЛЕНИЕ 2:

Вот решение, которое использует вложенные состояния вместе со службой валидатора по предложению Сантьяго Ребеллы

ОБНОВЛЕНИЕ 3:

Вот альтернативное решение для обновления 2, которое использует объект-валидатор в области родительского состояния для сравнения

Ответы

Ответ 1

Вы можете попытаться сделать это так, как вы заявляете, что просто передаете службе какие-то атрибуты, такие как step1, step2 и т.д., и добавляете значение true или независимо от его значения успеха, которое вы можете использовать, поэтому, когда все эти атрибуты верны, в вашем ng-отключенном или способе создания вашей формы, разрешается отправлять.

Возможно, на предыдущих этапах вы могли хранить значения входов в объекте вашей службы. Я думаю, таким образом вы можете создать многостраничную форму.

Ответ 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();
        } 
});