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-禁用=＆＃34; vm.myForm $无效＆＃34;

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

更新

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

 <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

AngularJS表单验证ngMessages不使用多步表单

输出：

1 个答案: