I am beginer in angular js. I am validating a form with some input feild and form is posting on ng-click but validation is not working, validation message are displaying for a white then disappear i have to submit the form after validating. form ng-click should not be called untill the form is valid please help me . Thanks in advance.
<form name="teamForm" novalidate ng-submit="submit(teamForm)" class="formfields">
<div class="col-md-12">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="lname">First Name:</label>
<input type="text" name="firstname"
ng-model="FirstName" class="form-control custom-form-control"
placeholder="First Name" required="required">
<span class="text-danger"
ng-show="(teamForm.firstname.$dirty || submitted) && teamForm.firstname.$error.required">Required</span>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="lname">Last Name:</label>
<input type="text" name="lastname"
ng-model="LastName" class="form-control custom-form-control"
placeholder="Last Name" required="required">
<span class="text-danger"
ng-show="(teamForm.lastname.$dirty || submitted) && teamForm.lastname.$error.required">Required</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="email">Email:</label>
<input type="text" name="email"
ng-model="Email" class="form-control custom-form-control"
ng-pattern="/^[^\s#]+#[^\s#]+\.[^\s#]{2,}$/"
placeholder="Email" required="required">
<span class="text-danger"
ng-show="(teamForm.email.$dirty || submitted) && teamForm.email.$error.required">Required</span>
<span class="text-danger"
ng-show="teamForm.email.$dirty &&teamForm.email.$error.pattern">Please Enter Valid Email</span>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Phone Number:</label>
<div class="clearfix"></div>
<input type="text" name="phone"
ng-model="Phone" class="form-control custom-form-control"
placeholder="XXXXXXXXXX" required="required">
<span class="text-danger"
ng-show="(teamForm.phone.$dirty || submitted) && teamForm.phone.$error.required">Required</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="form-group">
<label>Message:</label>
<textarea class="form-control rounded-0" rows="5"
name="comment" placeholder="Message"
ng-model="Comment" required="required"></textarea>
<span class="text-danger"
ng-show="(teamForm.comment.$dirty || submitted) && teamForm.comment.$error.required">Required</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="form-group">
<label>Upload Resume:</label>
<!--<input type="file" name="ResumePath" id="filehandler" />-->
<input type="file" id="file1" name="file" class="filelabel sr-only" multiple ng-files="getTheFiles($files)" onchange="Checkfiles($(this))" />
<!-- <input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/> -->
<label for="file1" class="form-control">
<span><i class="fa fa-file"></i> Drag file here or choose file</span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div vc-recaptcha key="'6Lc860IUAAAAAAyWI9WD8EV4eITu4ODdhuYHdzi8'"
class="grecaptcha" ng-model="respone1"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<button type="button" id="btnSubmit"
ng-click="uploadFiles()" value="Upload"
class="btn btn-green center-block pull-left">
<i class="fa fa-send"></i>{{btnText}}</button>
</div>
</div>
<div class="form-group text-center">
<h5 class="text-success" style="font-weight:bold">{{messagesuccess}}</h5>
<h5 class="text-danger" style="font-weight:bold">{{messageerror}}</h5>
</div>
</div>
</form>
ng-click (or it's vanilla cousin, onclick) do not check form validation. The function for submission needs to be defined at the form level, and then you specify which button acts as the submit button in order to get form behavior.
I see you already have a submit function defined. I assume you want to change that to uploadFiles. And if you want the form to conduct validation, remove the novalidation attribute.
<form name="teamForm" ng-submit="uploadFiles()" class="formfields">
then, for the button you would specify it is the submission button and remove the ng-click.
<button type="submit" id="btnSubmit"
value="Upload"
class="btn btn-green center-block pull-left">
<i class="fa fa-send"></i>{{btnText}}</button>
Related
When I try to access user.firstname value in controller, it gives the following error.
TypeError: Cannot read property 'firstname' of undefined
$scope.signUpCustomer = function(){
console.log("GGGGGGGGGGGGGGGGGGGGGGGGG ", $scope.user.firstname);
}
<form class="form-horizontal font-hp-simplified signUpUserForm row" role="form" ng-submit="signUpCustomer()" name ="signUpUserForm" ng-show="!userVendor">
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label for="firstname" class="col-md-12">First Name:</label>
<div class="col-md-12">
<input ng-model="user.firstname" type="text" class="form-control" name="firstname" required />
<span class="text-danger" ng-show="signUpUserForm.firstname.$invalid && signUpUserForm.firstname.$dirty ">First name is required</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lastname" class="col-md-12">Last Name:</label>
<div class="col-md-12">
<input ng-model="user.lastname" type="text" class="form-control" name="lastname" required />
<span class="text-danger" ng-show="signUpUserForm.lastname.$invalid && signUpUserForm.lastname.$dirty ">Last name is required</span>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label for="email" class="col-md-12">Email:</label>
<div class="col-md-12">
<input ng-model="user.email" type="email" class="form-control" name="email" required />
<span class="text-danger" ng-show="signUpUserForm.email.$error.required && signUpUserForm.email.$dirty ">Email is required</span>
<span class="text-danger" ng-show="signUpUserForm.email.$error.email && signUpUserForm.email.$dirty ">Please enter valid email</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="password" class="col-md-12">Password:</label>
<div class="col-md-12">
<input ng-model="user.password" type="password" class="form-control" name="password" required />
<span class="text-danger" ng-show="signUpUserForm.password.$invalid && signUpUserForm.password.$dirty">Password is required</span>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label for="phone" class="col-md-12">Phone:</label>
<div class="col-md-12">
<input ng-model="user.phone" type="text" class="form-control" name="phone" required />
<span class="text-danger" ng-show="signUpUserForm.phone.$invalid && signUpUserForm.phone.$dirty">Phone is required</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="country" class="col-md-12">Country:</label>
<div class="col-md-12">
<select name="country" ng-model="user.country" type="text" class="form-control form-bg-white" required>
<!-- <option value="" disabled selected>Select Your Country</option> -->
<option value="" disabled selected></option>
<option ng-repeat="country in countries" value="{{country}}">{{country}}</option>
</select>
<span class="text-danger" ng-show="signUpUserForm.country.$invalid && signUpUserForm.country.$dirty">Country is required</span>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-12">
<!-- Button -->
<div class="form-group">
<div class="col-md-12">
<div class="icon-user-signup">
<div class="input-group-addon">
<i class="fa fa-user"></i>
</div>
<button id="btn-signup" class="btn btn-primary col-md-12">SIGN UP</button>
</div>
</div>
<!-- <div class="mrg-top-10 col-md-12 text-right">
<h4><a ng-click="go('/seller#/signup')" class="ven-link">
Become a vendor today
</a></h4>
</div>-->
</div>
</div>
</div>
<!-- <div class="col-md-12 control">
<div class="signup-border" >
Already have an account ?
<a ui-sref="loginUser" >
Sign In Here
</a>
</div>
</div> -->
</form>
You need to initialize the $scope.customer first in controller
$scope.user = {};
I want to validate a form if an input text has value, or another one, or both of them.
For example
<!-- if username has data -->
<div class="username">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required
minlength="4" maxlength="8"
placeholder="4 to 8 characters long" />
</div>
<!-- if nickname has data -->
<div class="nickname">
<label for="nickname">Nickname:</label>
<input type="text" id="nickname" name="nickname" required
minlength="4" maxlength="8"
placeholder="4 to 8 characters long" />
</div>
<!-- or if both has data submit is enabled -->
<input type="submit" value="Submit">
-- EDIT --
Ok now I have something weird, it seems that the "&&" operator doesn't work in HTML, so I'm a bit stuck..
Actually, with your help, my button can be clicked if the condition is verified. But strangely :
- Button is not disabled
- If the condition is not verified, my button doesn't display my ng-if message.
HTML
<form class="form-horizontal" role="form" name="myForm" novalidate>
<div class="card-body card-padding">
<div class="form-group">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Firstname</label>
<div class="col-sm-8">
<tags-input ng-model="myForm.firstname"
min-length="0"
name="firstname"
use-strings="true" class="form-control" required>
</tags-input>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-8">
<tags-input ng-model="myForm.name"
min-length="0"
name="name"
use-strings="true" class="form-control" required>
</tags-input>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-8">
<tags-input ng-model="myForm.email"
min-length="0"
name="email"
use-strings="true" class="form-control" required>
</tags-input>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Username</label>
<div class="col-sm-8">
<tags-input ng-model="myForm.username"
min-length="0"
name="username"
use-strings="true" class="form-control" required>
</tags-input>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="container-fluid">
<div class="row">
<label class="col-sm-2 control-label">Nickname</label>
<div class="col-sm-8">
<tags-input ng-model="myForm.nickname"
min-length="0"
name="nickname"
use-strings="true" class="form-control" required>
</tags-input>
</div>
</div>
</div>
</div>
<div class="form-group" data-ng-show="btnOk">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" data-ng-click="action()" class="btn btn-success btn-sm"
ng-disabled="(!myForm.username.$valid || !myForm.nickname.$valid) && !myForm.email.$valid && !myForm.name.$valid && !myForm.firstname.$valid">
<span ng-if="(!myForm.username.$valid || !myForm.nickname.$valid) && !myForm.email.$valid && !myForm.name.$valid && !myForm.firstname.$valid">Some required fields are missing</span>
<span ng-if="(myForm.username.$valid || myForm.nickname.$valid) && myForm.email.$valid && myForm.name.$valid && myForm.firstname.$valid">{{button}}</span>
</button>
</div>
</div>
</div>
</form>
How can I bypass this behavior ?
An option is to
Enclose them inside a form (give it a name)
Declare an ng-model for username and nickname inputs
Put the conditionals using the $valid/$invalid options of the objects created by AngularJS for the form components:
See below working example:
angular.module('app', []).controller('ctrl', function() {});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="mForm" ng-app="app" ng-controller="ctrl as vm" novalidate>
<!-- if username has data -->
<div class="username">
<label for="username">Username:</label>
<input type="text" ng-model="vm.username" id="username" name="username" required minlength="4" maxlength="8" placeholder="4 to 8 characters long" />
</div>
<!-- if nickname has data -->
<div class="nickname">
<label for="nickname">Username:</label>
<input type="text" ng-model="vm.nickname" id="nickname" name="nickname" required minlength="4" maxlength="8" placeholder="4 to 8 characters long" />
</div>
<!-- or if both has data submit is enabled -->
<input type="submit" value="Submit" ng-disabled="mForm.username.$invalid && mForm.nickname.$invalid">
<div>Valid: {{!!(mForm.username.$valid || mForm.nickname.$valid)}}</div>
<form>
Resolved this by adding bool in my condition like:
<div class="col-sm-offset-2 col-sm-10">
<button type="button" data-ng-click="action()" class="btn btn-success btn-sm"
ng-disabled="(myForm.firstname.$valid == false || myForm.name.$valid == false || myForm.email.$valid == false || (myForm.username.$valid == false && myForm.nickname.$valid == false))">
<span ng-if="(myForm.firstname.$valid == false || myForm.name.$valid == false || myForm.email.$valid == false || (myForm.username.$valid == false && myForm.nickname.$valid == false))">Some required fields are missing</span>
<span ng-if="(myForm.firstname.$valid && myForm.name.$valid && myForm.email.$valid && (myForm.username.$valid || myForm.nickname.$valid))">{{button}}</span>
</button>
</div>
I want to load data of a selected row in a form in order to update it. I successfully had the data loaded in the form, the but the problem is when I use ng model to save the data all the stuff have been put in the form fields disappear.
<div class="panel-body pan" ng-if="loadedpr">
<form action="#">
<div class="form-body pal">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="refprojet" class="control-label">
Référence Projet *</label>
<input id="refprojet" type="text" value="{{loadedpr.ref_projet}}" class="form-control" disabled ng-model="ref_projet"/>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="intitulefr" class="control-label">
Intitulé *</label>
<input id="intitulefr" type="text" value="{{loadedpr.intitule_fr}}" class="form-control" ng-model="intitule_fr" />
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="ctot" class="control-label"> Coût Total (TND) *</label>
<input id="ctot" type="text" value="{{loadedpr.cout_total}}" ng-model="cout_total" class="form-control" disabled ng-model="cout_total" />
</div>
</div>
</div>
<div class="form-group">
<label for="description" class="control-label">
Description</label><textarea id="description" rows="3" value="{{loadedpr.description}}" ng-model="description" class="form-control"></textarea>
</div>
<div class="form-actions text-center pal">
<button type="submit" class="btn btn-primary" ng-click="upadateProjet()">Valider</button>
</div>
</div>
</form>
this is the angularjs method:
$scope.updateProjet= function(){
$scope.projet={'ref_projet':$scope.refprojet,'intitule_fr':$scope.intitule_fr,'description':$scope.description,cout_total':$scope.cout_total};
$http.put("/editprojet", $scope.projet)
.success(function(data,status,headers,config){
});
}
rest controller
#RequestMapping(value="/editprojet",method=RequestMethod.PUT)
public Projet editProjet(#RequestBody Projet p) {
return projetMetier.editProjet(p);
}
you are using button type="submit"
it will clear the form use button tag
<button></button>
$scope.updateProjet= function(projData){
$http.put("/editprojet", projData)
.success(function(data,status,headers,config){
}).error(function(data){
console.log(data)
});
}
<div class="panel-body pan" ng-if="loadedpr">
<form action="#">
<div class="form-body pal">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="refprojet" class="control-label">
Référence Projet *</label>
<input id="refprojet" type="text" value="{{loadedpr.ref_projet}}" class="form-control" disabled ng-model="proj.ref_projet"/>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="intitulefr" class="control-label">
Intitulé *</label>
<input id="intitulefr" type="text" value="{{loadedpr.intitule_fr}}" class="form-control" ng-model="proj.intitule_fr" />
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="ctot" class="control-label"> Coût Total (TND) *</label>
<input id="ctot" type="text" value="{{loadedpr.cout_total}}" ng-model="proj.cout_total" class="form-control" disabled ng-model="proj.cout_total" />
</div>
</div>
</div>
<div class="form-group">
<label for="description" class="control-label">
Description</label><textarea id="description" rows="3" value="{{loadedpr.description}}" ng-model="proj.description" class="form-control"></textarea>
</div>
<div class="form-actions text-center pal">
<button type="button" class="btn btn-primary" ng-click="upadateProjet(proj)">Valider</button>
</div>
</div>
</form>
</div>
have you tried removing the value attribute? this happened to me when I once added DOM forms on the fly, I managed by using jquery to force capture by:
$(this).find('.inputClass').val();
this sort of jequery is already embeded inside Angular so no need to add the the library.
I want to add validations to all the elements in the form. the error message should be displayed below the elements when the text of the control changes.
Following is my code:
<div role="tabpanel" class="tab-pane active" id="step-1">
<div class="col-md-4">
<div> <img src="../logo.jpg"
alt="Smiley face"
height="150"
style="margin:40px;"
width="150">
</div>
</div>
<div class="col-md-7">
<form action="r" name="regform"
method="post" >
<div class="col-md-6">
<div class="col-md-6" style="padding:0px;" >
<label for="mType" >Member Type*</label> <br />
<select id="member" ng-model="inputForm.mType" style="height:35px;width:135px;">
<option value="owner">Owner</option>
<option value="agent">Agent</option>
<option value="agent">Customer</option>
</select>
</div>
<div class="form-group">
<div class="col-md-6" style="padding:0px;" >
<label for="gender" >Gender </label> <br />
<select id="gender" ng-model="inputForm.gender" style="height:35px;width:135px;">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="form-group">
<label for=''>First Name</label>
<input type='name'
name='fName'
ng-model="inputForm.fName"
ng-minlength="1"
ng-maxlength="25"
ng-pattern="/^[A-Za-z]+$/"
required
/>
<span ng-show="regform.fName.$error.pattern">Please enter valid number!</span>
<!-- <span ng-show="studentForm.firstName.$touched && studentForm.firstName.$error.required">First name is required.</span>
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.minlength">min 3 chars.</span>
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.maxlength">Max 10 chars.</span>-->
</div>
<div class="form-group">
<label>Last Name : </label>
<input type="text"
name="lName"
class="form-control input-lg"
placeholder="Last Name"
ng-model="inputForm.lName"
style="height:35px">
</input>
</div>
<div class="form-group">
<label for="DOB">Date of Birth :</label>
<input type="date"
id="dob"
class="form-control input-lg"
placeholder="Date Of Birth (mm/dd/yyyy)"
ng-model="inputForm.dob"
style="height:35px;">
</input>
</div>
<div class="form-group">
<label>Adhar Number:</label>
<input type="text" id="adhar"
class="form-control input-lg"
placeholder="Adhar Number"
ng-model="inputForm.adhar"
style="height:35px">
</input>
</div>
<div class="form-group">
<label>PAN Number :</label>
<input type="text" id="pan"
class="form-control input-lg"
placeholder="PAN Number"
ng-model="inputForm.pan"
style="height:35px">
</input>
</div>
<div class="form-group">
<label>Email Address :</label>
<input type="email" id="email"
class="form-control input-lg"
placeholder="Your Email"
ng-model="inputForm.email"
style="height:35px">
</input>
<!-- <span ng-show="studentForm.email.$touched && studentForm.email.$error.email">Please enter valid email id.</span>-->
</div>
</div>
<div class="col-md-5" >
<div class="full-width bg-transparent">
<div class="full-width">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="custom-form">
<div class="text-center bg-form">
<div class="img-section">
<img src="http://lorempixel.com/200/200/nature/"
class="imgCircle"
alt="Profile picture">
<span class="fake-icon-edit"
id="PicUpload"
style="color: #ffffff;">
<span class="glyphicon glyphicon-camera camera"></span>
</span>
<div class="col-lg-12">
<h4 class="text-right col-lg-12" style="color:balck;">
<span class="glyphicon glyphicon-edit"></span> Edit Profile
</h4>
<input type="checkbox" class="form-control" id="checker"></input>
</div>
</div>
<input type="file"
id="image-input"
onchange="readURL(this);"
accept="image/*"
disabled class="form-control form-input Profile-input-file" >
</input>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8" >
<hr class="colorgraph" style="height: 5px;
border-top: 0;
background: #62c2e4;
border-radius: 5px;">
<div class="col-xs-4 col-xs-offset-3">
<a ui-sref="form.account" class="btn btn-lg btn-primary btn-block signup-btn"
style=" height:35px;
margin-bottom:10px;
padding:0px;" >
Next <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
</div>
</form>
</div>
</div>
image for reference
Please give suggestions to change the code so that appropriate error messages will be displayed to the controls after validating the input entr the user.
Your question is a bit vague as we can do what you are asking in many ways but find below an example using Bootstrap :
<form name="search" class="form-horizontal">
<div class="form-group col-md-2 required" ng-class="{
'has-feedback': (search.$submitted && search.carrier.$invalid),
'has-error': (search.$submitted && search.carrier.$invalid)}">
<label class="control-label" for="carrier">Carrier Code:</label>
<input type="text" class="form-control"
id="carrier" name="carrier"
required
pattern="[a-zA-Z0-9-]{2,3}"
maxlength="3"
ng-model="myAngularCtrl.flightDetails.carrier"/>
<span ng-show="search.$submitted && search.carrier.$error.required" class="field_errormsg-below">The Carrier Code is Mandatory</span>
<span ng-show="search.$submitted && search.carrier.$error.pattern" class="field_errormsg-below">use only numbers, digit and -</span>
</div>
<button type="submit"
class="btn btn-default FHU_margin-top-20"
ng-click="myAngularCtrl.searchFlight(search)">
Submit
</button>
</form>
You have a few things here:
The form has a name: search
You see two kind of error message being displayed. For them to be displayed, the user needs to have tried to submit the form (search.$submitted) and the field carrier needs to be in error (search.carrier.$error.required or search.carrier.$error.pattern)
have a quick question.
I have a form with whole bunch of fields that could be updated from UI.
I found a directive called "ng-model-option" that seems to be handling those kind of issues.
My question is: is it possible to rollback changes on whole form without specifying ng-model-options="{ updateOn: 'submit'}"
on every input fieldin my form?
Or, this directive look on every field and only submit those fields that were modified?
Thank you for your help and explanation in advance!
You could have all of your fields bound to a single object, i.e.
$scope.model = {
foo: '',
bar: '',
etc: ''
};
That way you could store a copy of the model, and reset the bound model at any point you wish.
For example to undo all of the changes after a failed service call:
$scope.submit = function() {
yourService.update(model).then(function(result) {
// handle the success.
}, function(err) {
$scope.model = $scope.originalModel;
});
}
Or maybe reloading the page is an option for you?
$window.location.reload();
i found a solution by using and mapping everything to ng-model-option directive
<form name="EditUserForm" class="col-md-12 form-horizontal top-buffer">
<div class="form-group">
<div class="col-sm-4 text-right">
<label>User Id:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control info-textbox" ng-model="user.UserID" ng-disabled="true" />
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>Department Name:</label>
</div>
<div class="col-sm-8">
<!--<input type="text" class="form-control info-textbox" ng-model="user.Department.DepartmentName" ng-readonly="isReadOnlyMode" />-->
<select class="form-control info-textbox" ng-options="department.DepartmentName for department in departments"
ng-model="selectedDepartment"
ng-readonly="isReadOnlyMode"
ng-model-options="{updateOn: 'submit'}"></select>
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>First Name:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control info-textbox" ng-model="user.FirstName" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" />
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>Last Name:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control info-textbox" ng-model="user.LastName" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" />
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>Email:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control info-textbox" ng-model="user.Email" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" />
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>Phone:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control info-textbox" ng-model="user.Phone" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" />
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>Login:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control info-textbox" ng-model="user.LoginName" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" />
</div>
</div>
<div class="form-group">
<div class="col-sm-4 text-right">
<label>Password:</label>
</div>
<div class="col-sm-8">
<input type="password" class="form-control info-textbox" ng-model="user.Password" ng-readonly="isReadOnlyMode" ng-model-options="{updateOn: 'submit'}" />
</div>
</div>
<!--Buttons-->
<div class="form-group">
<div class="col-sm-4 text-right">
<button type="button" class="btn btn-primary info-button" name="btnEdit" ng-click="flipBetweenEditMode(isReadOnlyMode)" ng-show="isReadOnlyMode">
<span>Edit</span>
</button>
<button type="button" class="btn btn-primary info-button" name="btnEdit" ng-click="flipBetweenEditMode(isReadOnlyMode)" ng-show="!isReadOnlyMode">
<span>Cancel</span>
</button>
</div>
<div class="col-sm-4 text-left">
<button type="submit" class="btn btn-primary info-button" name="btnSave" ng-click="saveChangesToUser(user, isReadOnlyMode)" ng-show="!isReadOnlyMode">
<span>Save</span>
</button>
</div>
<div class="col-sm-4 text-left">
<div back-button></div>
</div>
</div>
</form>
and then controller
$scope.flipBetweenEditMode = function (isReadOnlyMode) {
if (!isReadOnlyMode) {
$scope.EditUserForm.$rollbackViewValue();
}
console.log(isReadOnlyMode);
$scope.isReadOnlyMode = !isReadOnlyMode;
};
on cancel this will roll back all the changes and restore model at its first stage.