I'm looking at some odd code and I reran it to verify it works and for some reason its not and what is happening after I submit my form. Nothing seems to show up in my employeesList but if I refresh the screen then it will show up. Also, if I click the X to delete the user nothing happens and I receive no errors in the console.
Why can't I see the list of my employees unless I refresh my screen?
Why doesn't the employee get removed if I click my delete icon.
js/application.js
angular.module("employeesApp", []).controller("DBController", function ($scope, dataService) {
$scope.employeeName;
$scope.employeeStreet;
$scope.employeeCity;
$scope.employeeState;
$scope.employeeZipCode;
$scope.employeesList = dataService.getEmployees();
$scope.addEmployee = function() {
var employee = {
"employeeName": $scope.employeeName,
"employeeStreet": $scope.employeeStreet,
"employeeCity": $scope.employeeCity,
"employeeState": $scope.employeeState,
"employeeZipCode": $scope.employeeZipCode
};
dataService.addEmployee(employee);
$scope.employeeName = '';
$scope.employeeStreet = '';
$scope.employeeCity = '';
$scope.employeeState = '';
$scope.employeeZipCode = '';
}
$scope.deleteEmployee = function(deletedEmployee) {
dataService.removeEmployee(deletedEmployee);
}
});
js/dataService.js
angular.module("employeesApp").service("dataService", function () {
var employeesList = [];
this.getEmployees = function () {
var str = localStorage.getItem("Employees");
employeesList = JSON.parse(str) || employeesList;
return employeesList;
};
this.addEmployee = function (employee) {
var employeesList = this.getEmployees();
employeesList.push(employee);
var str = JSON.stringify(employeesList);
localStorage.setItem("Employees", str);
};
this.removeEmployee = function (employee) {
var employeesList = this.getEmployees();
employeesList.splice(employeesList.indexOf(employee), 1);
var str = JSON.stringify(employeesList);
localStorage.setItem("Employees", str);
};
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Employee Directory</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/application.css">
</head>
<body ng-app="employeesApp" ng-controller="DBController">
<div class="container">
<h1>Employee Directory</h1>
<hr>
<div class="row">
<div class="col-md-6">
<h3>Add an Entry</h2>
<form role="form">
<div class="form-group">
<label for="name">Employee:</label>
<input type="text" id="name" name="name" class="form-control" ng-model="employeeName">
</div>
<div class="form-group">
<label for="street">Street:</label>
<input type="text" id="street" name="street" class="form-control" ng-model="employeeStreet">
</div>
<div class="form-group">
<label for="city">City:</label>
<input type="text" id="city" name="city" class="form-control" ng-model="employeeCity">
</div>
<div class="form-group">
<label for="state">State:</label>
<input type="text" id="state" name="state" class="form-control" ng-model="employeeState">
</div>
<div class="form-group">
<label for="zipcode">Zip Code:</label>
<input type="text" id="zipcode" name="zipcode" class="form-control" ng-model="employeeZipCode">
</div>
<button type="submit" ng-click="addEmployee()" class="btn btn-primary">Add</button>
</form>
</div>
<div class="col-md-6" id="employee-list">
<div ng-repeat="employee in employeesList track by $index" class="employee">
<div class="employee-header">
<span class="glyphicon glyphicon-user"></span>
<strong>{{employee.employeeName}}</strong>
<span ng-click="deleteEmployee(employee)" class="glyphicon glyphicon-remove"></span>
</div>
<div class="employee-footer">
<address>
{{employee.employeeStreet}}<br>
{{employee.employeeCity}}, {{employee.employeeState}} {{employee.employeeZipCode}}
</address>
</div>
</div>
</div>
</div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/application.js"></script>
<script src="js/dataService.js"></script>
</body>
</html>
It appears you are setting your scopes employeesList on the initial page load, however you are not re-associating this when you add employees or delete employees. You need to set $scope.employeesList every time you modify the data.
$scope.employeesList = dataService.getEmployees();
Is the line you are setting the data for your scope's view.
Related
var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope){
//Adding New Check# and Check amount Text Boxes
$scope.texs = [{id: 'tex', value: 'tex1'}];
$scope.add = function() {
var newItemNo = $scope.texs.length+1;
$scope.texs.push({'id':'tex'+newItemNo});
};
//Removing Last Check# and Check amount Text Boxes
$scope.remove = function() {
var lastItem = $scope.texs.length-1;
$scope.texs.splice(lastItem);
};
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="col-md-12">
<div class="col-md-6">
<div ng-repeat="tex in texs">
<div class="form-group">
<label>tex:</label>
<div class="col-md-5">
<input type="number" class="form-control" id="tex.id" ng-model="tex.id" maxlength="6"></input>
</div>
<button ng-show="$last"
ng-click="remove()">-</button>
</div>
</div>
<button type="button"
ng-click="add()">Add More</button>
</div>
</div>
<div class="col-md-6">
<label>{{tex.id}}</label>
</div>
</body>
</html>
Above i mentioned my code. here If i did not use the ng-repeat="tex in texs",the label tex and texNo is displaying the value once i entered the values in input. But If I did use the ng-repeat="tex in texs", the value is not displayed. I know the code is wrong,but what i want is If i click Add More and entered the values of the second tex and texNo, I want to display the both of values of tex and texNo in the Label.
please suggest me with something.
The tex.id contains a string tex whereas ng-model is expecting a number.
You can use dynamic keys and provide an initial value to it
Inside controller
$scope.texs = [{'id1': 1}];
$scope.add = function() {
var newItemNo = $scope.texs.length+1;
$scope.texs.push({['id'+newItemNo]:1});
};
Inside HTML
<div ng-repeat="tex in texs">
<div class="form-group">
<label>tex:</label>
<div class="col-md-5">
<input type="number" class="form-control" id="{{'id'+($index+1)}}" ng-model="tex['id'+($index+1)]" maxlength="6" />
</div>
<button ng-show="$last"
ng-click="remove()">-</button>
</div>
</div>
<button type="button"
ng-click="add()">Add More</button>
</div>
FIDDLE
So, you need to use:
$scope.texs = [{id: 'tex', value: 'tex1'}];
And in HTML:
<div class="form-group"">
<label>tex:</label>
<div class="col-md-5">
<input type="number" class="form-control" id="{{tex.id}}" ng-model="tex.id" maxlength="6"></input>
</div>
<button ng-show="$last"
ng-click="remove()">-</button>
</div>
<div class="form-group">
<label>tex No:</label>
<div col-md-5">
<input type="number" class="form-control" id="{{tex.value}}" ng-model="tex.value" maxlength="9"></input>
</div>
</div>
</div>
Here im using Bootstrap validations with AngularJs when my form is submitted the columns is reset but its shows all validation..But my aim is its should not display validations
Bootstrap
<div class="modal" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<form name="f1" novalidate ng-submit="Save(Auth.emp)">
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<div class="row">
<div class="col-sm-4">
Email
</div>
<div class="col-sm-8">
<input type="text" name="email" class="form-control" ng-model="Auth.Email" ng-class="Submitted?'ng-dirty':''" required />
<span class="Error" ng-show="(f1.email.$dirty ||Submitted) && f1.email.$error.required">Email REq</span>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
Password
</div>
<div class="col-sm-8">
<input type="text" name="psw" class="form-control" ng-model="Auth.Password" ng-class="Submitted?'ng-dirty':''" required />
<span class="Error" ng-show="(f1.psw.$dirty ||Submitted) && f1.psw.$error.required">Password REq</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" value="{{LoginAction}}" />
</div>
</form>
</div>
</div>
</div>
AngularCode.Js
$scope.Save = function (emp) {
if ($scope.LoginAction = "Login") {
$scope.Submitted = true;
if ($scope.isFormValid == true) {
var ss = {
Email: $scope.Auth.Email,
Password: $scope.Auth.Password,
}
var xxer = myServices.GetLogin(ss);
xxer.then(function (msg) {
$scope.msg = msg.data;
$('#modal2').modal('show')
Reset();
})
}
}
}
Reset
function Reset() {
$scope.Email = '';
$scope.Password = '';
}
I think you looking for this:
function Reset() {
$scope.Auth.Email = ''
$scope.Auth.Password = '';
}
You can set a model at the same level as the form tag and make all other inputs sub properties. Then set form model at the root level to an empty object when you click on reset. Here's a codepen.
function exampleController($scope) {
$scope.reset = function() {
$scope.form = {};
};
}
angular
.module('app', [])
.controller('exampleController', exampleController);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div class="row" ng-app="app" ng-controller="exampleController">
<form novalidate ng-model="form">
<input ng-model="form.email" type="email" />
<input ng-model="form.password" type="password" />
</form>
<button ng-click="reset()">Reset</button>
<pre>{{form}}</pre>
</div>
The input fields should NOT directly update the fields (meaning when I type in the input box you should NOT see the badge field update - only after the Submit button is pressed will the fields populate).
//index.html
<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Name Badge</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="MainController">
<div class="container">
<div class="row">
<div class="col-md-6">
<input class="text" placeholder="First Name" ng-model="fName"><br>
<input class="text" placeholder="Email" ng-model="email"><br>
<input class="text" placeholder="Phone" ng-model="phone">
</div>
<div class="col-md-6">
<input class="text" placeholder="Last Name" ng-model="lName"><br>
<input class="text" placeholder="Place of Birth" ng-model="birth"><br>
<input class="text" placeholder="Favorite Food" ng-model="food">
</div>
</div>
<textarea ng-model="about">Tell us about yourself</textarea><br>
<button class="btn" type="submit" ng-submit="info()">Submit</button>
<br><br>
<br><br><br><br>
<div class="row">
<div class="col-xs-6">
<h3>Name: {{fName}} {{lName}}</h3>
<h3>Place of Birth: {{birth}}</h3>
<h3>Email: {{email}}</h3>
</div>
<div class="col-xs-6">
<h3>Phone: {{phone}}</h3>
<h3>Favorite Food: {{food}}</h3>
</div>
</div>
<textarea>{{about}}</textarea>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
Here is my app.js
var app = angular.module("MyApp", []);
app.controller("MainController", ['$scope', function ($scope) {
$scope.info = function () {
$scope.fName = fName;
$scope.email = '';
$scope.phone = '';
$scope.lName = '';
$scope.birth = '';
$scope.food = '';
$scope.about = '';
}
}])
Can someone look at my code and help me see what's wrong.
<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Name Badge</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="MainController">
<div class="container">
<div class="row">
<div class="col-md-6">
<input class="text" placeholder="First Name" ng-model="fName"><br>
<input class="text" placeholder="Email" ng-model="email"><br>
<input class="text" placeholder="Phone" ng-model="phone">
</div>
<div class="col-md-6">
<input class="text" placeholder="Last Name" ng-model="lName"><br>
<input class="text" placeholder="Place of Birth" ng-model="birth"><br>
<input class="text" placeholder="Favorite Food" ng-model="food">
</div>
</div>
<textarea ng-model="about">Tell us about yourself</textarea><br>
<button class="btn" type="submit" ng-submit="info()">Submit</button>
<br><br>
<br><br><br><br>
<div class="row">
<div class="col-xs-6">
<h3>Name: {{fName1}} {{lName1}}</h3>
<h3>Place of Birth: {{birth1}}</h3>
<h3>Email: {{email1}}</h3>
</div>
<div class="col-xs-6">
<h3>Phone: {{phone1}}</h3>
<h3>Favorite Food: {{food1}}</h3>
</div>
</div>
<textarea>{{about}}</textarea>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
js file is
var app = angular.module("MyApp", []);
app.controller("MainController", ['$scope', function ($scope) {
$scope.info = function () {
$scope.fName1 = $scope.fName1;
$scope.email1 = $scope.email;
$scope.phone1 = $scope.phone;
$scope.lName1 = $scope.lName;
$scope.birth1 = $scope.birth;
$scope.food1 = $scope.food;
$scope.about1 = $scope.about;
}
}])
I have a form using ng-messages for form validation error messages. Im also using the new ng-model-options with $rollbackViewValue to rollback all changes to the form. Problem is ng-mesages will not work if I use the rollbackViewValue on the form.
I really like this new function in angular1.3 using ng-model-options to reset a form as I have not found anything that works as well as $rollbackViewValue()
Heres is the code and plunker
<!DOCTYPE html>
<html data-ng-app="App">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
</head>
<body>
<div class="container" data-ng-controller="formCrtl as vm">
<div class="col-lg-5">
<form name="form" novalidate="novalidate" role="form"
data-ng-submit="vm.submit()"
data-ng-model-options="{updateOn: 'submit'}" >
<!---->
<div class="form-group" data-ng-class="{ 'has-error': form.fname.$invalid && form.fname.$touched }">
<label for="fname">First Name</label>
<input type="text" required class="form-control" name="fname" id="fname" placeholder="Enter text" data-ng-model="vm.names.fname">
<div data-ng-if="form.fname.$touched" data-ng-messages="form.fname.$error">
<span class="help-block" data-ng-message="required">required field</span>
</div>
</div>
<div class="form-group" data-ng-class="{ 'has-error': form.lname.$invalid && form.lname.$touched }">
<label for="lname">Last Name</label>
<input type="text" required class="form-control" name="lname" id="lname" placeholder="Enter text" data-ng-model="vm.names.lname">
<div data-ng-if="form.lname.$touched" data-ng-messages="form.lname.$error">
<span class="help-block" data-ng-message="required">required field</span>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10 btn-group">
<button type="submit" class="btn btn-primary" data-ng-disabled="form.$invalid">Submit</button>
<button type="button" class="btn btn-default" data-ng-click="form.$rollbackViewValue()">reset</button>
<!---->
</div>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-messages.js"></script>
<script src="scripts.js"></script>
</body>
</html>
controller
var App = angular.module("App", ['App', 'ngMessages']);
App.controller('formCrtl',function ($scope, $rootScope) {
var vm = this;
vm.names = {
fname: "Albert",
lname: "Capone"
}
});
You would need to make the form pristine and revert back the touched state as well. You can do so by calling the special functions, $setPristine() and $setUntouched() , on the formController. But it appears rollBackViewValue works with ngSubmit, but it is only to revertback during some action, (like esc key, another button). But if the form field has contraint errors it appears it updated viewvalue to nullify the entered value. You could try this way by resetting to default field values.
In your view:-
<button type="button" class="btn btn-default"
data-ng-click="vm.reset(form)">reset</button>
In your controller:-
var vm = this;
var defModel = {
fname: "Albert",
lname: "Capone"
};
vm.names = angular.copy(defModel);
vm.reset = function(form) {
form.$rollbackViewValue();
form.$setPristine(); //Set pristine state
form.$setUntouched(); //Set state from touched to untouched
vm.names = angular.copy(defModel); //reset model
}
var App = angular.module("App", ['App', 'ngMessages']);
App.controller('formCrtl', function($scope, $rootScope) {
var vm = this;
var defModel = {
fname: "Albert",
lname: "Capone"
};
vm.names = angular.copy(defModel);
vm.reset = function(form) {
form.$rollbackViewValue(); //Probably can be removed
form.$setPristine();
form.$setUntouched();
vm.names = angular.copy(defModel);
}
});
<div data-ng-app="App">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div class="container" data-ng-controller="formCrtl as vm">
<div class="col-lg-5">
<form name="form" novalidate="novalidate" role="form" data-ng-submit="vm.submit(form)" data-ng-model-options="{updateOn: 'submit'}">
<!---->
<div class="form-group" data-ng-class="{ 'has-error': form.fname.$invalid && form.fname.$touched }">
<label for="fname">First Name</label>
<input type="text" required class="form-control" name="fname" id="fname" placeholder="Enter text" data-ng-model="vm.names.fname">
<div data-ng-if="form.fname.$touched" data-ng-messages="form.fname.$error">
<span class="help-block" data-ng-message="required">required field</span>
</div>
</div>
<div class="form-group" data-ng-class="{ 'has-error': form.lname.$invalid && form.lname.$touched }">
<label for="lname">Last Name</label>
<input type="text" required class="form-control" name="lname" id="lname" placeholder="Enter text" data-ng-model="vm.names.lname">
<div data-ng-if="form.lname.$touched" data-ng-messages="form.lname.$error">
<span class="help-block" data-ng-message="required">required field</span>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10 btn-group">
<button type="submit" class="btn btn-primary" data-ng-disabled="form.$invalid">Submit</button>
<button type="button" class="btn btn-default" data-ng-click="vm.reset(form)">reset</button>
<!---->
</div>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-messages.js"></script>
</div>
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);
}
}
});