1

我不知道如何做一个多态表格。主要问题是表单。$errors 似乎查看的是活动状态而不是整个表单。换句话说，提交按钮应该在整个表单的所有必填问题都得到回答之前被禁用，但是当所有必填问题都被回答为活动状态时，它似乎会被启用。

这是一个简化的 Plunker：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';

  }

})();
4

2 回答 2

0

您需要做的就是在模型中设置一个标志，例如“formComplete”，然后在他们遇到最后一个问题时将其打开……我们在处理类似问题时遇到了类似的问题，这就是我们解决它的方式。

或者，您可以简单地将提交按钮移动到最后一页

于 2016-12-17T14:56:26.957 回答
0

问题在于您设置事物的方式。当我切换选项卡时， angular-ui-router 会完全删除视图，因此 angular 只会看到一个formly-form，因此一次只能formly-form验证一个。我建议不要使用 angular-ui-router 而是只使用一个指令（如 angular-ui-bootstrap 的tabset指令），该指令用于ng-show一次将两个表单都保留在页面上，因此在进行验证时两者都会被考虑在内。这是一个可能对您有所帮助的示例。

于 2015-08-01T02:27:37.500 回答