solo - AngularJS valida validación ngMessages no funciona con forma de varios pasos

ng-pattern solo numeros

Question

Estoy usando AngularJS 1.5, ui-router para la gestión del estado y ngMessages para la validación y ngMaterial para UI. Tengo una vista principal contenida en myformView.html y cargo dentro de ella dos estados (firstPartView.html y secondPartView.html).

Seguí este tutorial para crear una forma de varios pasos.

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>

Manejo estatal:

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

Ahora la validación no se aplica correctamente y no sé si esto se debe a la forma de varios pasos o no? Por ejemplo, si el usuario no ingresó nada en la entrada del primer nombre, el botón de enviar debe desactivarse debido a

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

pero esto no está pasando, ¿alguna ayuda?

Actualizar:

Quiero mencionar que el ejemplo que escribí arriba es un ejemplo demasiado ligero para mi código real, así que traté de hacerlo a continuación:

 <div data-ui-view></div>
<pre ng-bind="vm.myForm | json"></pre>

Al escribir esto, se generó un objeto JSON demasiado grande para la primera vista.

LA SALIDA:

Primera vista:

 {
"$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
}
}

Segunda vista:

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

Answer 1

Te falta la directiva ng-form en el elemento de formulario. Vincula todos los elementos de formulario incluso si no están anidados bajo el mismo elemento de formulario por nombre de formulario. Algo confuso de explicar. Consulte la documentación para obtener todos los detalles. https://docs.angularjs.org/api/ng/directive/ngForm

gran artículo con buenos ejemplos