I am using AngularJS 1.5, ui-router for state management and ngMessages for validation and ngMaterial for UI. I have one main view contained in myformView.html and I load inside it two states (firstPartView.html and secondPartView.html).
我使用AngularJS 1.5，ui-router进行状态管理，使用ngMessages进行验证，使用ngMaterial进行UI。我有一个主视图包含在myformView.html中，我在其中加载了两个状态（firstPartView.html和secondPartView.html）。
I followed this tutorial to create multi-step form.
我按照本教程创建了多步骤表单。
myformView.html:
myformView.html：
<form name="vm.myForm" ng-submit="vm.submit()">
<div data-ui-view></div>
</form>
firstPartView.html:
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:
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 Handling:
国家处理：
.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"
})
Now the validation is not applied correctly and I don't know if this is due to multi-step form or not? For example, if the user didn't input anything in the first name input, the submit button should be disabled due to
现在验证没有正确应用，我不知道这是否是由多步形式造成的？例如，如果用户未在第一个名称输入中输入任何内容，则应禁用提交按钮
ng-disabled="vm.myForm.$invalid"
NG-禁用= “vm.myForm $无效”
but this is not happening, any help?
但这没有发生，有什么帮助吗？
Update:
更新：
I want to mention that the example I wrote above is too lightweight of an example for my real code, so I tried to do that below:
我想提一下，我上面写的例子对于我的实际代码来说太简单了，所以我试着在下面这样做：
<div data-ui-view></div>
<pre ng-bind="vm.myForm | json"></pre>
Typing this generated too large of a JSON object for the first view.
键入此内容会为第一个视图生成过大的JSON对象。
THE OUTPUT:
First View:
第一视图：
{
"$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
}
}
Second View:
第二观点：
{
"$error": {},
"$name": "vm.myForm",
"$dirty": false,
"$pristine": true,
"$valid": true,
"$invalid": false,
"$submitted": false
}
1 个解决方案
#1
0
You are missing the ng-form directive on the form element. It links all form elements even if they are not nested under the same form element by form name. Kind of confusing to explain. Check out the documentation for it for all the details. https://docs.angularjs.org/api/ng/directive/ngForm
您缺少表单元素上的ng-form指令。它链接所有表单元素，即使它们没有通过表单名称嵌套在相同的表单元素下。有点难以解释。有关所有详细信息，请查看相关文档。 https://docs.angularjs.org/api/ng/directive/ngForm
great article with good examples
有很好例子的好文章
#1
0
You are missing the ng-form directive on the form element. It links all form elements even if they are not nested under the same form element by form name. Kind of confusing to explain. Check out the documentation for it for all the details. https://docs.angularjs.org/api/ng/directive/ngForm
您缺少表单元素上的ng-form指令。它链接所有表单元素，即使它们没有通过表单名称嵌套在相同的表单元素下。有点难以解释。有关所有详细信息，请查看相关文档。 https://docs.angularjs.org/api/ng/directive/ngForm
great article with good examples
有很好例子的好文章