我使用AngularJS 1.5,ui-router进行状态管理,使用ngMessages进行验证,使用ngMaterial进行UI.我有一个主视图包含在myformView.html中,我在其中加载了两个状态(firstPartView.html和secondPartView.html).

我按照这个tutorial创建了多步形式.

myformView.html：

<form name="vm.myForm" ng-submit="vm.submit()">

       <div data-ui-view></div>

   </form>

firstPartView.html：

<md-input-container class="md-block" flex-gt-sm>
   <label>First name (required)</label>
   <input name="firstName" ng-model="vm.user.firstName" ng-pattern="/^[a-zA-Z0-9]*$/" required>
   <div ng-messages="vm.myForm.firstName.$error" ng-show="vm.myForm.firstName.$touched">
  div ng-message="required">Your first name is required!</div>
div ng-message="pattern">Your first name should only contains valid characters!</div>
 </div>

secondPartView.html：

<md-button type="submit" ng-disabled="vm.myForm.$invalid" class="md-primary md-raised">Sign up</md-button>
<md-button type="reset" ng-click="vm.resetForm()" class="md-primary">Reset</md-button>

国家处理：

.state("registration",{
                      url: "/register",templateUrl: "app/register/myformView.html",controller: "myformController as vm"
                  })
                      .state("registration.first",{
                          url: "/first",templateUrl: "app/register/firstPartView.html.html"
                      })
                      .state("register.second",{
                          url: "/second",templateUrl: "app/register/secondPartView.html"
                      })

现在验证没有正确应用,我不知道这是否是由多步形式造成的？例如,如果用户未在第一个名称输入中输入任何内容,则应禁用提交按钮

ng-disabled=”vm.myForm.$invalid”

但这没有发生,有什么帮助吗？

更新：

我想提一下,我上面写的例子对于我的实际代码来说太简单了,所以我试着在下面这样做：

<div data-ui-view></div>

 <pre ng-bind="vm.myForm | json"></pre>

键入此内容会为第一个视图生成过大的JSON对象.

输出：

第一视图：

{
  "$error": {
    "required": [
      {
        "$validators": {},"$asyncValidators": {},"$parsers": [
          null
        ],"$formatters": [
          null,null
        ],"$viewChangeListeners": [],"$untouched": true,"$touched": false,"$pristine": true,"$dirty": false,"$valid": false,"$invalid": true,"$error": {
          "required": true
        },"$name": "firstName","$options": null
      },{
        "$validators": {},"$name": "lastName","$name": "email","$options": null
      }
    ]
  },"$name": "vm.myForm","$submitted": false,"profilePicture": {
    "$validators": {},"$parsers": [
      null
    ],"$formatters": [
      null
    ],"$valid": true,"$invalid": false,"$error": {},"$name": "profilePicture","$options": null
  },"firstName": {
    "$validators": {},"$formatters": [
      null,null
    ],"$error": {
      "required": true
    },"lastName": {
    "$validators": {},"email": {
    "$validators": {},"phoneNumber": {
    "$validators": {},"$name": "phoneNumber","$options": null
  }
}

第二观点：

{
  "$error": {},"$submitted": false
}