AngularJS表单验证ngMessages不适用于多步表单

Question

我使用 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": {},
        "$asyncValidators": {},
        "$parsers": [
          null
        ],
        "$formatters": [
          null,
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": true,
        "$touched": false,
        "$pristine": true,
        "$dirty": false,
        "$valid": false,
        "$invalid": true,
        "$error": {
          "required": true
        },
        "$name": "lastName",
        "$options": null
      },
      {
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [
          null
        ],
        "$formatters": [
          null,
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": true,
        "$touched": false,
        "$pristine": true,
        "$dirty": false,
        "$valid": false,
        "$invalid": true,
        "$error": {
          "required": true
        },
        "$name": "email",
        "$options": null
      }
    ]
  },
  "$name": "vm.myForm",
  "$dirty": false,
  "$pristine": true,
  "$valid": false,
  "$invalid": true,
  "$submitted": false,
  "profilePicture": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [
      null
    ],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "profilePicture",
    "$options": null
  },
  "firstName": {
    "$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
  },
  "lastName": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [
      null
    ],
    "$formatters": [
      null,
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": false,
    "$invalid": true,
    "$error": {
      "required": true
    },
    "$name": "lastName",
    "$options": null
  },
  "email": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [
      null
    ],
    "$formatters": [
      null,
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": false,
    "$invalid": true,
    "$error": {
      "required": true
    },
    "$name": "email",
    "$options": null
  },
  "phoneNumber": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [
      null
    ],
    "$formatters": [
      null,
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "phoneNumber",
    "$options": null
  }
}

第二次查看：

{
  "$error": {},
  "$name": "vm.myForm",
  "$dirty": false,
  "$pristine": true,
  "$valid": true,
  "$invalid": false,
  "$submitted": false
}

Answer 1

您在表单元素上缺少 ng-form 指令。它链接所有表单元素，即使它们没有按表单名称嵌套在同一个表单元素下。解释起来有点混乱。查看它的文档以获取所有详细信息。 https://docs.angularjs.org/api/ng/directive/ngForm

great article with good examples