Question

我无法弄清楚如何制作多州表格。主要问题是表单。$ errors似乎看待活动状态而不是整个表单。换句话说，提交按钮应该被禁用，直到为整个表单回答了所有必需的问题，但是当所有需要的问题都被回答为活动状态时，它似乎已启用。

这是一个简化的Plunker：http://plnkr.co/edit/O49eO4uRlUjoWHlxV6Li?p=preview

以下是我的实际代码。

查看：

public class gwtbugEntryPoint implements EntryPoint {
  @Override
  public void onModuleLoad() {
    String data = "{\"type\":\"upd\", \"id\":123}";
    ServerEvent serverEvent = JsonUtils.<ServerEvent>safeEval(data);
    RootPanel.get().add(new HTML("GWT id="+serverEvent.getId()));
  }

}
class ServerEvent extends JavaScriptObject {
    protected ServerEvent() {
    }

public final native String getType()/*-{ return this.type; }-*/;

public final Long getId(){
    String idStr = _getId();
    GWT.log("idSTr:" + idStr);
    Long id = new Long(idStr);
    GWT.log("id:"+id);
    return id;
}

public final native String  _getId()/*-{ return this.id; }-*/;
}

路线：

  <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>

itemNewCtrl：

  .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'
  })

Answer 1

问题在于您设置的方式。当我切换标签时，angular-ui-router完全删除了视图，因此angular只能看到一个formly-form，因此一次只验证一个formly-form。我建议不要使用angular-ui-router，而只是使用一个指令（如angular-ui-bootstrap＆＃39; s tabset指令），它使用ng-show将两个表单保存在页面上时间，因此在进行验证时将考虑两者。这里an example可以帮助你。

Answer 2

您需要做的就是设置一个标记，例如＆＃34; formComplete＆＃34;在模型中，一旦他们到达最后一个问题就将其打开......我们在使用类似的问题时遇到了类似的问题以及我们如何解决它。

或者，您只需将提交按钮移至最后一页

即可

具有Angular-Formly的多状态表单

2 个答案: