I am using AngularJS 1.5, ui-router for state management and ngMessages for validation and ngMaterial for user interface. I have one main view contained in myformView.html and I load two states inside it (firstPartView.html and secondPartView.html).
I did the following tutorial to create a multi-step form.
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>
Status 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 validation is not applied, and I do not know if it is connected with a multi-stage form or not? For example, if the user did not enter anything when entering the name, the submit button should be disabled due to
ng disabled = "vm.myForm. $ Invalid"
, ?
Update:
, , , , :
<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
}