Multi-state Forms with Angular-Formly - angularjs

Question

I can't figure out how to do a multi-state form. The main issue is the form.$errors seem to look at the active state rather then the whole form. In other words, the submit button is meant to be disabled until ALL required questions are answered for the entire form, but it seems to become enabled when all the required questions are answered for the active state.
Here's a simplified Plunker: http://plnkr.co/edit/O49eO4uRlUjoWHlxV6Li?p=preview
And below is my actual code.
View:
<div class="row">
<div class="col-md-4">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" ng-repeat="section in vm.sections[0].sections" ng-if="section.fields">
<a ui-sref="subject.items.new.section({sectionUrl: section.url})">
<span class="badge badge-warning" title="Number of unanswered required questions for {{section.name}}">1</span>
{{section.name}}
</a>
</li>
</ul>
</div>
<div class="col-md-8">
<form class="assessment-item" name="assessmentForm">
<div ui-view></div>
<hr>
<button class="btn btn-primary btn-raised" ng-disabled="assessmentForm.$invalid" ng-click="vm.createCompletedItem()">Save Changes</button>
<button class="btn btn-inverse btn-inverse-danger" back-button>Cancel</button>
</form>
</div>
</div>
Routes:
.state('subject.items.new', {
url: '/items/new/:availableItemUrl',
templateUrl: 'components/items/new.html',
controller: 'ItemNewCtrl',
controllerAs: 'vm',
resolve: {
getAvailableItemsResolve: function(DataService) {
return DataService.availableItems().getList();
},
getUser: function($cmUserData) {
return $cmUserData.getUser(1);
}
}
})
.state('subject.items.new.section', {
url: '/:sectionUrl',
template: '<div class="animated fadeIn"><formly-form model="vm.completedItem.answers" fields="vm.fields"></formly-form></div>',
controller: function($scope, $stateParams, lodash) {
var vm = this;
var _ = lodash;
vm.questions = _.filter($scope.vm.sections[0].sections, { 'url' : $stateParams.sectionUrl });
vm.fields = vm.questions[0].fields;
vm.completedItem = $scope.vm.completedItem;
},
controllerAs: 'vm'
})
itemNewCtrl:
(function() {
'use strict';
angular
.module('casemanagerApp')
.controller('ItemNewCtrl', ItemNewCtrl);
function ItemNewCtrl($stateParams, $filter, DataService, lodash, getUser, getAvailableItemsResolve) {
var vm = this;
var _ = lodash;
vm.item = DataService.completedItems().one();
vm.availableItems = getAvailableItemsResolve;
vm.sections = _.filter(vm.availableItems, { 'url' : $stateParams.availableItemUrl });
vm.completedItem = DataService.completedItems().one();
vm.completedItem.subjectId = $stateParams.subjectId;
vm.completedItem.name = vm.sections[0].name;
vm.completedItem.probationOfficer = getUser.firstName + ' ' + getUser.lastName;
vm.completedItem.label = 'Final';
}
})();

Answer 1

The issue is due to the way you have things set up. When I switch tabs, angular-ui-router removes the view entirely and therefore angular only sees one formly-form, therefore only one formly-form is validated at a time. I would recommend against using angular-ui-router and instead just use a directive (like angular-ui-bootstrap's tabset directive) which uses ng-show to keep both forms on the page at a time and therefore both will be taken into account when doing validation. Here's an example that might help you there.

Answer 2

All you need to do is set a flag, like "formComplete" in the model and then flip it on once they get to the last question...we have similar issues at work with something like this and that's how we work around it.
Alternatively you could simply move the submit button to the last page