マルチステート フォームの実行方法がわかりません。主な問題はフォームです.$errors は、フォーム全体ではなく、アクティブな状態を見ているようです。つまり、送信ボタンは、フォーム全体で必須の質問にすべて回答するまで無効になるはずですが、アクティブな状態で必須の質問にすべて回答すると有効になるようです。
ここに簡略化されたプランカーがあります: http://plnkr.co/edit/O49eO4uRlUjoWHlxV6Li?p=preview
以下は私の実際のコードです。
意見：
<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>
ルート:
.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';
}
})();