While switching back and forth with the radio buttons, the form values get reset. Why does $scope.user reset and does not stay persistent?
var app = angular.module("myApp", ["ui.bootstrap"]);
app.controller(
"myCtrl",
function($scope) {
$scope.radio_test = "0";
$scope.user = "John Doe";
}
);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body>
<div ng-app="myApp" ng-controller="myCtrl" class="container">
<div class="panel panel-default">
<div class="panel-body">
<div>
<form>
Choose:
<label class="radio-inline"><input type="radio" ng-model="radio_test" value="0">First</label>
<label class="radio-inline"><input type="radio" ng-model="radio_test" value="1">Second</label>
</form>
<br />
<div ng-switch="radio_test">
<div ng-switch-when="0">
<div>
<form ng-app="myApp" name="myForm" class="form-horizontal" novalidate>
<div class="form-group">
<label class="control-label col-sm-2" for="user">Username:</label>
<div class="col-sm-10">
<input type="text" name="user" ng-model="user" class="form-control" required />
<div style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<div ng-show="myForm.user.$error.required">Username is required.</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div ng-switch-when="1">
<div>Something Else</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Use the controller as syntax (Run the below snippet in order to see how it fixes the issue).
In your code you would need to change:
1- This
$scope.radio_test="0";
$scope.user="John Doe";
to
var vm = this;
vm.radio_test = "0";
vm.user = "John Doe";
2- This: ng-controller="myCtrl" to ng-controller="myCtrl as vm"
3- And every where you were accessing anyVar in the view (and in controller $scope.anyVar) to vm.anyVar (in the view and the controller).
var app = angular.module("myApp", ["ui.bootstrap"]);
app.controller(
"myCtrl",
function($scope) { // there is no need to use the $scope any more
var vm = this;
vm.radio_test = "0";
vm.user = "John Doe";
}
);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="myApp" ng-controller="myCtrl as vm" class="container">
<div class="panel panel-default">
<div class="panel-body">
<div>
<form>
Choose:
<label class="radio-inline"><input type="radio" ng-model="vm.radio_test" value="0">First</label>
<label class="radio-inline"><input type="radio" ng-model="vm.radio_test" value="1">Second</label>
</form>
<br />
<div ng-switch="vm.radio_test">
<div ng-switch-when="0">
<div>
<form ng-app="myApp" name="myForm" class="form-horizontal" novalidate>
<div class="form-group">
<label class="control-label col-sm-2" for="user">Username:</label>
<div class="col-sm-10">
<input type="text" name="user" ng-model="vm.user" class="form-control" required />
<div style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<div ng-show="myForm.user.$error.required">Username is required.</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div ng-switch-when="1">
<div>Something Else</div>
</div>
</div>
</div>
</div>
</div>
</div>
Setting your ng-model on the input to $parent.user seems to do the trick.
var app = angular.module("myApp", ["ui.bootstrap"]);
app.controller(
"myCtrl",
function($scope) {
$scope.radio_test = "0";
$scope.user = "John Doe";
}
);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body>
<div ng-app="myApp" ng-controller="myCtrl" class="container">
<div class="panel panel-default">
<div class="panel-body">
<div>
<form>
Choose:
<label class="radio-inline"><input type="radio" ng-model="radio_test" value="0">First</label>
<label class="radio-inline"><input type="radio" ng-model="radio_test" value="1">Second</label>
</form>
<br />
<div ng-switch="radio_test">
<div ng-switch-when="0">
<div>
<form ng-app="myApp" name="myForm" class="form-horizontal" novalidate>
<div class="form-group">
<label class="control-label col-sm-2" for="user">Username:</label>
<div class="col-sm-10">
<input type="text" name="user" ng-model="$parent.user" class="form-control" required />
<div style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<div ng-show="myForm.user.$error.required">Username is required.</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div ng-switch-when="1">
<div>Something Else</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Related
I have dropdown in model popup and want to do required field validation here. My code is following.. But the code is not done the validation..
<div class="form-group form-group-sm">
<label for="itClassification" class="control-label text-xs
col-xs-12 col-sm-4 col-md-4 col-lg-4">IT Classification :
</label>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<select class="form-control" id="itClassification"
name="itClassification" ng-model="itClassification"
ng-options="ic.itId as ic.itClassificationName for ic in
itClassifications" placeholder="select IT Classification"
required>
<option value="" ng-selected="selected">Select IT
Classification</option>
</select>
<div class="help-block" ng-messages="addClientModal.itClassification.$error"
ng-if="addClientModal.itClassification.$dirty && addClientModal.itClassification.$invalid">
<p class="text-danger small" ng-message="required"><strong>ITClassification is required.</strong>
</p>
</div>
</div>
</div>
Can anyone help me to solve this..?
Thanks in advance
Just add ngform tag
<div class="form-group form-group-sm">
<ng-form name="addClientModal">
// other tags
</ng-form>
</div>
Here i added form name as addClientModal see Example
Check this is the answer. You need to use validations on form name->form control name. Here is Plunkr http://plnkr.co/edit/bKEVv4kfnSJFd0w29Zdl?p=preview
var app = angular.module('myApp', ['ngMessages']);
app.controller('TestController', function($scope) {
//$scope.itClassification = null;
$scope.optionsList = [
{'label':'One','value':'1'},
{'label':'Two','value':'2'},
{'label':'Three','value':'3'},
{'label':'Four','value':'4'},
{'label':'Five','value':'5'},
{'label':'Six','value':'6'},
{'label':'Seven','value':'7'},
{'label':'Eight','value':'8'},
{'label':'Nine','value':'9'},
{'label':'Ten','value':'10'},
]
$scope.listItemChanged=function(schedule){
alert($scope.itClassification)
};
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<script data-require="ng-messages#*" data-semver="1.3.16" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-messages.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="TestController">
<form name="userForm" autocomplete="off">
<div class="form-group form-group-sm">
<label for="itClassification" class="control-label text-xs col-xs-12 col-sm-4 col-md-4 col-lg-4">IT Classification :</label>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<select class="form-control" id="itClassification" name="itClassification" ng-model="itClassification" ng-options="listItem.label as listItem.value for listItem in optionsList" placeholder="select IT Classification" required>
<option value="" ng-selected="selected">Select IT Classification</option>
</select>
<div class="help-block" ng-messages="userForm.itClassification.$error">
<p class="text-danger small" ng-message="required"><strong>ITClassification is required.</strong>
</p>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
I need one example for validations on dynamic added fields. Here is my page.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js">
</script>
<title>Add Remove in AngularJS</title>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.deleted = [];
$scope.inputs = [];
$scope.addRow = function(){
$scope.inputs.push({name:'', age:''});
};
$scope.removeRow = function(index, input){
// alert(index);
// alert(input);
$scope.deleted.push(input);
$scope.inputs.splice(index,1);
};
});
</script>
</head>
<body style="background-color: gray; margin-top: 10px; ">
<center>
<div class="row" ng-app="myApp" ng-controller="myCtrl">
<div class="col-md-6">
<div class="panel panel-flat">
<div class="panel-header">
<h4>
Person Address
<button ng-click="addRow()">Add</button>
</h4>
</div>
<div class="panel-body">
<form name="form" class="form-horizontal">
<div ng-repeat="input in inputs">
<div class="form-group" ng-class="{'has-error' : form.name.$invalid}">
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name[$index]" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span class="help-block" ng-show="form.name[$index].$error.pattern">Alphabet only</span>
<span class="help-block" ng-show="form.name[$index].$error.minlength">Too Short</span>
<span class="help-block" ng-show="form.name[$index].$error.maxlength">Too Long</span>
<span class="help-block" ng-show="form.name[$index].$error.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span ng-show="form.age.$invalid && form.age.$error.pattern">Number
length should be 3</span>
</div>
</div>
<button ng-click="removeRow($index, input)">Remove</button>
<hr>
</div>
</form>
</div>
</div>
</div>
<!-- inputs :{{inputs}}<br>deleted : {{deleted}} -->
</div>
</center>
</body>
</html>
You can add a fonction to you controller :
app.controller('myCtrl', function($scope) {
//...
$scope.validationFn = function () {
//do you validation here
};
then you just need to modify
<form name="form" class="form-horizontal" ng-submit="validationFn()">
Here is the answer:
<div class="panel-body"><form name="form" class="form-horizontal">
<div ng-repeat="input in inputs"><ng-form name="sfIn"><div class="form-group" >
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span
class="help-block" ng-show="sfIn.name.$error.pattern">Alphabet only</span>
<span
class="help-block" ng-show="sfIn.name.$error.minlength">Too Short</span>
<span
class="help-block" ng-show="sfIn.name.$error.maxlength">Too Long</span>
<span
class="help-block" ng-show="sfIn.name.$touched.required || sfIn.name.$error.required ||
sfIn.name.$dirty.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span
ng-show="sfIn.age.$error.pattern">Number
length should be 3</span>
</div>
</div>
<button
ng-click="removeRow($index, input)">Remove</button>
</ng-form>
<hr>
</div>
</form>
</div>
I have 2 step form
on step 1 : ask user to how many input form needed
that use in < input type="number" ng-model="vm.nkeys" />`
on step 2 : want to create one input text for each with ng-model and name attribute in array form so that I can capture the every input box value; but both is not working; see the relevant code and wokrking plunker below.
<div ng-show="vm.step == 2" ng-form="vm.step2form" class="step-content body" >
<div class="text-center m-t-md">
<div ng-repeat="n in [].constructor(vm.nkeys) track by $index" class="form-group">
<label class="col-sm-2 control-label">{{$index+1}}</label>
<input ng-model="key_desc" name="description_{{n}}" type="text" class="form-control" >
</div>
</div>
</div>
tried ng-model="key_desc[{{$index+1}}] but no success; also name=description_{{$index}} is also not working
see the demo plunker
what do I need to do?
Have a look at the sample snippet below:
<div ng-repeat="item in getNumber(key) track by $index">
<input type="text" ng-model="text[$index]" name="input_{{$index}}" />
<span ng-if="text[$index]">
- {{text[$index]}}
</span>
</div>
Refer the demo here.
See your code now:
<div ng-repeat="n in vm.getNumber(vm.nkeys) track by $index" class="form-group">
<!-- Other stuff -->
<input id="location" ng-model="key_desc[$index]" name="description_{{n}}" type="text" class="form-control" >
</div>
See you code here.
Try this
<input ng-model="key_desc['{{$index}}']" name="description_{{n}}" type="text" class="form-control" >
Set vm variable to ng-model.
(function () {
'user strict';
angular.module('app',[])
.controller('FormController', function ($log) {
var vm = this;
vm.title = 'Key Manager';
vm.step = 1;
vm.key_desc = [];
vm.submit = _submit;
function _submit(){
alert(vm.key_desc);
}
vm.next = function() {
$log.debug('clicked on next');
if(vm.step < 3 )
vm.step = vm.step + 1;
vm.getKeys=function(n){
return new Array(n);
};
}
vm.prev = function() {
$log.debug('clicked on prev');
if(vm.step > 0)
vm.step = vm.step - 1;
}
vm.hasPreviousStep = function(){
var previousStep = vm.step - 1;
return (previousStep > 0);
};
});
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap#3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="angular.js#1.5.7" data-semver="1.5.7" src="https://code.angularjs.org/1.5.7/angular.js"></script>
<!--<link rel="stylesheet" href="style.css" />-->
<script src="script.js"></script>
</head>
<body ng-controller="FormController as vm">
<h1>{{vm.title}}</h1>
<div class="row">
<div class="col-lg-7">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Genarate Key(s)</h5>
</div>
<div class="ibox-content">
<form action="#" class="form" novalidate>
<div role="application" class="wizard clearfix">
<div class="content clearfix">
<div ng-form='vm.step1form' ng-show="vm.step == 1" class="step-content body" >
<div class="m-t-md">
<h2>Number of Keys</h2>
<div class="form-group">
<label class="col-sm-2 control-label">Number of Keys *</label>
<div class="col-sm-4">
<input type="number" min="0" max="50" id="nkeys" name="nkeys" ng-model="vm.nkeys" required class="form-control required" placeholder="How many keys required" />
</div>
</div>
</div>
</div>
<div ng-form="vm.step2form" ng-show="vm.step == 2" class="step-content body" >
<div class="text-center m-t-md">
<h2>This is step 2</h2>
<div ng-repeat="n in [].constructor(vm.nkeys) track by $index" class="form-group">
<label class="col-sm-2 control-label">{{$index+1}}</label>
<div class="col-sm-4">
<input id="location" ng-model="vm.key_desc[$index]" name="description_{{n.name}}" type="text" class="form-control" >
</div>
</div>
</div>
</div>
</div>
<div class="actions clearfix">
<ul class="list-inline">
<li >
<button ng-disabled="vm.step=='1'" type="button" class="btn btn-w-m btn-primary" ng-click="vm.prev()">Previous</button>
</li>
<li >
<button type="button" class="btn btn-w-m btn-primary" ng-click="vm.next()" ng-disabled="!vm.step1form.$valid">Next</button>
</li>
<li >
<button class="btn btn-primary " ng-click="vm.submit()" type="button"><i class="fa fa-check"></i> Submit</button>
</li>
<li>
<button ui-sref="keyhouse.list" type="button" class="btn btn-w-m btn-warning" >Cancel</button>
</li>
</ul>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
model name could be connect with controller name..using vm variable..
In your controller initialize vm.key_desc = [] in your controller..
Use an Array element as ng-model
<input ng-model="key_desc[$index]" name="description_{{n}}"
type="text" class="form-control" >
here the value of first input will be in $scope.key_desc[0], second in $scope.key_desc[1] and so on
before that, initialise $scope.key_desc = [] in your controller
Problem Definition
I am using AngularJS's ngRoute module for the first time and I am running into some trouble with it. I have a index.cshtml page in which I reference my routingModule by setting the ng-app. I also have a ng-view so that when I click on "New Account" it loads register.cshtml in the ng-view or if I click on "Sign In" it will load authenticate.cshtml in the ng-view.
The routing is working as expected since I can see the register and authenticate pages load in the ng-view when I click the links in on my index page. But the controllers I have set for the register and authenticate pages in the routingModule.js seem to not be there.
I get this error when clicking on "New Account" on the index page.
I get the same error when I click on "Sign In" on the index page
I have added all the javascript and html files below needed to solve the problem. Any help would be much appreciated.
Webroot Structure
routingModule.js
var routingModule = angular.module("routingModule", ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when('/account/register', { templateUrl: '/account/register/', controller: 'RegisterController' });
$routeProvider.when('/account/authenticate', { templateUrl: '/account/authenticate/', controller: 'AuthenticateController' });
})
index.cshtml
<!DOCTYPE html>
<html ng-app="routingModule">
<head>
<base href="/" />
<script src="~/Scripts/JQuery/jquery-2.1.3.js"></script>
<script src="~/Scripts/Angular/angular.min.js"></script>
<script src="~/Scripts/Angular/angular-route.min.js"></script>
<script src="~/Scripts/Angular/angular-resource.min.js"></script>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/Content/boostrap-hero.min.css" rel="stylesheet" />
<script src="~/Scripts/Bootstrap/bootstrap.min.js"></script>
<script src="/Scripts/app/Registration/registerModule.js"></script>
<script src="/Scripts/App/Registration/registerService.js"></script>
<script src="/Scripts/App/Registration/registerController.js"></script>
<script src="/Scripts/App/Registration/validatePasswordDirective.js"></script>
<script src="~/Scripts/App/Authentication/authenticateModule.js"></script>
<script src="~/Scripts/App/Authentication/authenticateController.js"></script>
<script src="~/Scripts/App/Authentication/authenticateService.js"></script>
<script src="~/Scripts/App/Routing/routingModule.js"></script>
<meta name="viewport" content="width=device-width" />
<title>AngularJS + ASP.NET MVC</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="navbar navbar-default">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li><span class="navbar-brand">AngularJS + ASP.NET Playground</span></li>
</ul>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li> Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> Sign In</li>
<li> New Account</li>
</ul>
</div>
</div>
</div>
<div ng-view></div>
</div>
</body>
</html>
register.cshtml
<form name="registerForm" novalidate>
<div class="row">
<div class="col-md-10">
<h2>Create Account</h2>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Username</label>
<input type="text" name="userName" ng-model="user.userName" class="form-control" required />
<div class="text-danger" ng-show="registerForm.userName.$error.required && registerForm.userName.$dirty">Please enter your first name</div>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" ng-model="user.email" class="form-control" required ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" />
<div class="text-danger" ng-show="registerForm.email.$error.required && registerForm.email.$dirty">Please enter a your email address</div>
<div class="text-danger" ng-show="registerForm.email.$error.pattern && registerForm.email.$dirty">Invalid email address</div>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" ng-model="user.password" class="form-control" required />
<div class="text-danger" ng-show="registerForm.password.$error.required && registerForm.password.$dirty">Please enter a password</div>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="passwordConfirm" ng-model="user.passwordConfirm" class="form-control" required compare-to="user.password" />
<div class="text-danger" ng-show="registerForm.passwordConfirm.$error.required && registerForm.passwordConfirm.$dirty">Please repeat your password</div>
</div>
<div class="form-group">
<button class="btn btn-default" ng-disabled="registerForm.$invalid" ng-click="register(user)">Create Account</button>
<div style="color: red;" ng-show="errors.length > 0" ng-repeat="error in errors">{{error}}</div>
</div>
</div>
</div>
</form>
authenticate.cshtml
<form name="loginForm" novalidate>
<div class="row">
<div class="col-md-10">
<h2>Sign In</h2>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Email</label>
<input type="text" name="email" ng-model="user.email" class="form-control" required ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" />
<div class="text-danger" ng-show="loginForm.email.$error.required && loginForm.email.$dirty">Please enter a your email address</div>
<div class="text-danger" ng-show="loginForm.email.$error.pattern && loginForm.email.$dirty">Invalid email address</div>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" ng-model="user.password" class="form-control" required />
<div class="text-danger" ng-show="loginForm.password.$error.required && loginForm.password.$dirty">Please enter a password</div>
</div>
<div class="form-group">
<button class="btn btn-default" ng-disabled="loginForm.$invalid" ng-click="authenticate(user)">Sign In</button>
<div style="color: red;" ng-show="errors.length > 0" ng-repeat="error in errors">{{error}}</div>
</div>
</div>
</div>
</form>
registerModule.js
var registerModule = angular.module("registerModule", ["ngResource"]);
registerController.js
registerModule.controller("RegisterController", function ($scope, $location, registerService) {
$scope.register = function (user) {
$scope.errors = [];
registerService.register(user).$promise.then(
function () { $location.url('/home/index');},
function (response){$scope.errors = response.data});
};
});
registerService.js
registerModule.factory('registerService', function ($resource) {
return {
register: function(user) {
return $resource('/api/account/register/').save(user);
}
}
});
From what i can see here, the authenticationModule and registerModule are missing as dependencies of your routingModule:
var routingModule = angular.module("routingModule", ['ngRoute', 'authenticationModule', 'registerModule'])
I hide a div in the second form and the third form if the first form is valid. The idea is that when you click on the submit button and if this is valid hide this element.
<div class="cover" ng-hide ="form.shipping.$valid"/>
I am not very clear yet how the logic works Angular these cases, if someone here can give me an idea would appreciate.
Example the my code:
(function() {
'use strict';
var checkOut = angular
.module('checkOutPageApp', [
'ngResource',
'ngAnimate',
'ngMessages'
]);
// Global controller
checkOut.controller('globalCtrl', function($scope, $locale) {
$scope.areaStatus = false;
$scope.disabled = function() {
if ($scope.shipping.$valid) {
return true;
} else {
return false
}
}
});
// Controller for form Shipping address
checkOut.controller('CheckoutShippingCtrl', ['$scope', '$http', '$location',
function($scope, $http, $location) {
this.data = {};
var self = this;
this.submit = function(valid) {
$scope.areaStatus = false;
if (!valid) {
return;
}
self.submitting = true;
$http.post('', self.data).then(function() {
self.data = [];
$location.path('/completed');
}, function(response) {
self.submitting = false;
});
};
}
]);
}(window, window.angular));
<div class="modifyAddressShipping" ng-controller="CheckoutShippingCtrl as form">
<form id="shipping" class="shipping" name="shipping" novalidate ng-submit="form.submit(shipping.$valid)" ng-class="{'loading': form.submitting, 'is-el-dirty' : shipping.$dirty || shipping.dirty}">
<fieldset class="billing reset-style">
<div id="shipping_address" class="group-items-form active">
<div class="row collapse">
<div class="row">
<!-- / .items-form -->
<div class="large-12 columns items-form">
<label>
<input class="field field-chk" type="text" name="name" placeholder="Name" ng-model="form.data.name" required/>
</label>
<div class="error" ng-if="shipping.$submitted || shipping.name.$touched" ng-messages="shipping.name.$error">
<p class="text-msg" ng-message="required">You did not enter your name</p>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<div class="chk-box">
<div class="large-24 column box-chk-btn chk-btn-sm">
<button ng-click="areaStatus = !areaStatus" type="submit" class="chk-btn button-cta" data-ng-disabled="shipping.$invalid">
Next
</button>
</div>
</div>
</form>
</div>
<div class="delivery-payment-card-chk">
<form id="delivery_payment_form" novalidate name="formDelivery" class="min-h-3333" data-ng-submit="deliveryForm(formDelivery.$valid)">
<fieldset class="billing reset-style">
<div id="delivery_payment" class="group-items-form">
<div class="large-24 column items-form">
<label for="delivery1">
<input name="delivery" type="radio" id="delivery1" checked>2nd Class Delivery</label>
<label for="delivery2">
<input name="delivery" type="radio" id="delivery2">Click & Collect</label>
<label for="delivery3">
<input name="delivery" type="radio" id="delivery3">48 Hour</label>
<label for="delivery4">
<input name="delivery" type="radio" id="delivery4">Next Working Day</label>
<label for="delivery5">
<input name="delivery" type="radio" id="delivery5">Saturday Courier Delivery</label>
<!-- / label -->
</div>
<!-- / .items-form -->
</div>
</fieldset>
<div class="chk-box">
<div class="large-24 column box-chk-btn chk-btn-sm">
<button class="chk-btn button-cta" data-ng-disabled="disabled">
Next
</button>
</div>
</div>
</form>
</div>
<div class="sd-delivery-payment-card-chk" ng-controller="CheckoutPaymentCtrl as form">
<form name="checkoutPayment" novalidate class="min-h-3333" ng-submit="form.submit(checkoutPayment.$valid)" ng-class="{loading:form.submitting}">
<fieldset class="sd-billing reset-style">
<div id="delivery_payment" class="sd-group-items-form">
<div class="large-24 columns items-form">
<label>
<input class="sd-field field-chk" type="text" ng-disabled="disabled" name="name" placeholder="Name" ng-model="form.data.name" required></input>
</label>
<div class="error" ng-if="checkoutPayment.$submitted || checkoutPayment.name.$touched" ng-messages="checkoutPayment.name.$error">
<p class="text-msg" ng-message="required">You did not enter your name</p>
</div>
</div>
<!-- / .sd-items-form -->
<div class="large-24 columns items-form">
<label>
<input type="text" id="card_number" name="cardnumber" card-data-type autocomplete="off" size="19" ng-minlength="15" maxlength="19" nd-disabled="" class="sd-field" placeholder="XXXX XXXX XXXX XXXX" ng-class="(form.data.cardnumber | checkcreditcard)" ng-model="form.data.cardnumber"
required>
<small class="checkCard" ng-class="(form.data.cardnumber | checkcreditcard)"></small>
</label>
<div class="error" ng-if="checkoutPayment.$submitted || checkoutPayment.cardnumber.$touched" ng-messages="checkoutPayment.cardnumber.$error">
<p class="text-msg" ng-message="required">You did not enter your card number</p>
</div>
</div>
<!-- / .sd-items-form -->
<div class="large-6 columns items-form">
<label>
<input id="expiry_date" maxlength="5" name="datacard" card-data-expiration ng-disabled="" class="sd-field txt-center p-l-0" ng-model="form.data.datacard" type="text" type placeholder="MM / YY" required></input>
</label>
<div class="error" ng-if="checkoutPayment.$submitted || checkoutPayment.datacard.$touched" ng-messages="checkoutPayment.datacard.$error">
<p class="text-msg" ng-message="required">Not valid date credit card</p>
</div>
</div>
<!-- / .sd-items-form -->
<div class="large-5 columns items-form">
<label>
<input name="cvv" class="sd-field txt-center p-l-0" ng-disabled="disabled" maxlength="4" ng-minlength="3" type="text" ng-pattern="/^[0-9]+$/" placeholder="CVV" ng-model="form.data.cvv" required></input>
</label>
<div class="error" ng-if="checkoutPayment.$submitted || checkoutPayment.cvv.$touched" ng-messages="checkoutPayment.cvv.$error">
<p class="text-msg" ng-message="required">Security code required</p>
</div>
<div class="error" ng-show="checkoutPayment.cvv.$error.pattern">
<p class="text-msg">Security code must contain only numbers</p>
</div>
<div class="error" ng-show="checkoutPayment.cvv.$error.minlength">
<p class="text-msg">Security code must be 3-4 digits</p>
</div>
</div>
<!-- / .sd-items-form -->
</div>
</div>
</fieldset>
<div class="sd-chk-box">
<div class="large-24 column box-chk-btn chk-btn-sm">
<button type="submit" class="sd-chk-btn button-cta" ng-disabled="!checkoutPayment.$invalid">
Place order
</button>
</div>
</div>
</form>
</div>
The following hides a form when the submit button has been pressed ONLY IF the form submitted is $valid. To work between controllers I created a variable on $rootScope to flag if the form is valid or invalid. It may be more correct to use a getter and setter function and store the variable in a service.
INDEX.HTML
<!DOCTYPE html>
<html lang="en" ng-app="msgApp">
<head>
<meta charset="utf-8"/>
</head>
<body ng-controller="MainCtrl">
<div ng-show="form1Done" ng-hide="!form1Done">
<h2>The Form has not disappeared</h2>
</div>
<div ng-show="!form1Done" ng-hide="form1Done">
<h2>The Form</h2>
<form name="userForm">
<div class="field">
<label for="userName">Enter your userName:</label>
<input type="text" name="userName" ng-model="data.userName"
ng-minlength="5" ng-maxlength="30" required />
<div ng-messages="userForm.userName.$error" ng-messages-multiple>
<!-- the required message -->
<div ng-message="required">Please enter username</div>
<div ng-message="minlength">Username is too short</div>
<div ng-message="maxlength">Username is too long</div>
<div ng-message="userName">Error with username</div>
</div>
</div>
<button type="submit" ng-click="clickBtn(userForm.$valid)">Submit</button>
</form>
</div>
<script src="http://code.angularjs.org/1.3.6/angular.js"></script>
<script src="http://code.angularjs.org/1.3.6/angular-messages.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
APP.JS
angular.module('msgApp', ['ngMessages', 'msgApp.controllers'])
.run(function($rootScope) {
$rootScope.form1Done = false;
});
CONTROLLERS.JS
angular.module('msgApp.controllers', [] )
.controller('MainCtrl', function($scope, $rootScope) {
$scope.clickBtn = function(form) {
//valid form
if(form == true) {
console.log("Form is valid, $rootScope.form1Done= "+$rootScope.form1Done);
$rootScope.form1Done = true;
}
//invalid form
if(form == false) {
$rootScope.form1Done = false;
console.log("Form is invalid, $rootScope.form1Done= "+$rootScope.form1Done);
}
}
});