Develop Reference

How to retain the values in form after validation error in angularjs

I have a validation in my form for email. If the user is already registered, it shows the alert and resets the form with null value. I need the alert message as well as data should retain in the form.
Thanks in advance.
https://plnkr.co/edit/WhdRmJmLs69yaf6Q2uYI?p=preview
<div class="form-group">
<label class="control-label col-sm-2" for="firstName">First Name:</label>
<div class="col-xs-4">
<input type="text" class="form-control" id="firstName" ng-disabled="!edit" name="firstName" ng-model="user.firstName" ng-required="true">
<span style="color:red" ng-show="userForm.myName.$touched && userForm.myName.$invalid">Please enter a First Name</span>
</div>
<label class="control-label col-sm-2">Email:</label>
<div class="col-xs-4"><input type="email" id="email" class="form-control" ng-disabled="!edit" name="email" ng-model="user.email" ng-required="true">
<span style="color:red" ng-show="userForm.email.$touched && userForm.email.$invalid">Please enter valid email ID</span>
</div>
</div>
<div class="panel-footer">
<button type="button" ng-click='edit=!edit'id="Edit" ng-show="!edit" class="btn btn-default" >Edit</button>
<button ng-show="edit" id="save" type="submit" ng-click='addOrModifyUser(user)' class="btn btn-default"
ng-disabled="userForm.$invalid">Save
</button>
<a ng-if="user.accountId" ui-sref="account.locations.contacts({accountId: user.accountId})">
<button type="type" class="btn btn-default">Cancel</button>
</a>
</div>
I?p=preview

Don't know exactly what your problem is here but this is how I would have solved a custom email validation check in angular 1.x.
Html:
<form ng-submit="submit()">
<input type="email" class="form-control" id="email" name="email" placeholder="email" ng-model="formModel.email" />
<span ng-show="formModel.$submitted && formModel.teamName.$error.exists">Email already exists</span>
</form>
Js: (in your angular controller) where "EmailService" would be your http service of choice that checks if email exists against your backend:
myApp.controller('mainController', function($scope, EmailService) {
$scope.submit = function() {
$scope.formModel.email.$setValidity("exists", true);
EmailService.emailExist($scope.formModel.email, { // check if email exists
success: function(exists) {
$scope.$apply(function(){
$scope.formModel.email.$setValidity("exists", !exists); // set validation flag
});
if($scope.formModel.$valid) {
// submit if valid
}
}
}
}
}
Good luck!

only execute function with ng-click if input fields are not empty

I only want to perform this function if the other two fields are not empty, not sure how to do it.
ng-click="saveToList($event)"
HTML
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a Title/Description</label>
<input type="text" id="urlName" class="form-control" placeholder="" ng-model="mvName" />
</div>
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a URL</label>
<input type="text" id="urlLink" class="form-control" placeholder="" ng-model="mvUrl" />
</div>
<div class="col-xs-2">
Post
</div>
app.js
$scope.saveToList = function(event) {
var mvName = $scope.mvName.trim();
var mvUrl = $scope.mvUrl.trim();
if (mvName.length > 0) {
$scope.favUrls.$add({
name: mvName,
title: mvUrl
});
urlName.value = ''; //urlName is the ID of input box - Angular rocks!
urlLink.value = ''; //urlName is the ID of input box - Angular rocks!
}
}
I get this error when they are empty:
Error: $scope.mvName is undefined

The problem isn't anything to do with Angular: .trim() doesn't work against undefined values. Check to see if the variable is defined before trying to trim it, for example:
var mvName = ($scope.mvName) ? $scope.mvName.trim() : '' ;

You should initialize $scope.mvName in your controller! As it is empty, you are getting an error at line var mvName = $scope.mvName.trim();
EDIT
Post

You can add ng-disabled directive to your a tag. Something like this:
<a href ng-disabled="!mvName || !mvUrl" ng-click="saveToList($event)" class="btn btn-block post">Post</a>
or check that vars in your js:
$scope.saveToList = function(event) {
if(!$scope.mvName || !$scope.mvUrl)
return;
var mvName = $scope.mvName.trim();
var mvUrl = $scope.mvUrl.trim();
...

You could do it like this:
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a Title/Description</label>
<input type="text" id="urlName" class="form-control" placeholder="" ng-model="mvName" />
</div>
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a URL</label>
<input type="text" id="urlLink" class="form-control" placeholder="" ng-model="mvUrl" />
</div>
<div class="col-xs-2">
<a href="javascript:"
ng-click="(mvName != '' && mvUrl != '') && saveToList($event)" class="btn btn-block post">Post</a>
</div>
Or use ng-disabled="mvName === '' && mvUrl === ''"
Other options would be to not render the button: ng-if or ng-show.

How about performing a simple check to see if the fields are empty or not, before you perform any comparisons using the value. That should solve the issue I believe.

<form name="myForm">
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a Title/Description</label>
<input type="text" id="urlName" required class="form-control" placeholder="" ng-model="mvName" />
</div>
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a URL</label>
<input type="text" id="urlLink" required class="form-control" placeholder="" ng-model="mvUrl" />
</div>
<div class="col-xs-2">
Post
</div>
</form>
Try using the angular validation.

AngularJS form validation not functioning

I'm doing something wrong but cant see what. I've followed the angular js docs and the validations are not working:
<form name="callbackForm" ng-submit="requestCallback()">
<div class="col-md-3">
<input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required=""/>
</div>
<div class="col-md-3">
<input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required=""/>
</div>
<div class="col-md-3">
<input type="submit" class="btn btn-sm btn-block" value="Call Me!">
</div>
<div class="col-md-3">
<p ng-show="callbackForm.name.$error.required" class="help-block">Your name is required.</p>
<p ng-show="callbackForm.telephone.$invalid && !callbackForm.telephone.$pristine" class="help-block">Your telephone number is required.</p>
</div>
</form>
with a controller as follows:
'use strict';
app.controller('footerController', ['$scope', '$http', function ($scope, $http) {
$scope.requestCallback = function () {
alert("form callback");
};
}]);
However, I can't get my error messages to appear. Also the ng-minlength are not restricting the form submission? Am I missing something simple here?

Your code seems to work fine.
Regarding the submission restriction on error - you have to explicitly use angular's valiation by doing something like:
<form name="callbackForm" novalidate ng-submit="callbackForm.$valid && requestCallback()">
Here's a snippet:
function Ctrl($scope) {
$scope.requestCallback = function() {
alert("form callback");
};
}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<div ng-app>
<div ng-controller="Ctrl">
<form name="callbackForm" novalidate ng-submit="callbackForm.$valid && requestCallback()">
<div class="col-md-3">
<input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required="" />
</div>
<div class="col-md-3">
<input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required="" />
</div>
<div class="col-md-3">
<input type="submit" class="btn btn-sm btn-block" value="Call Me!">
</div>
<div class="col-md-3">
<p ng-show="callbackForm.name.$error.required" style="font-size: 14px; color:#ff0033" >Your name is required.</p>
<p ng-show="callbackForm.name.$error.minlength" style="font-size: 14px; color:#ff0033" >Your name should have at least 3 letters</p>
<p ng-show="callbackForm.telephone.$error.required" style="font-size: 14px; color:#ff0033" >Your telephone number is required.</p>
<p ng-show="callbackForm.telephone.$error.minlength" style="font-size: 14px; color:#ff0033" >Your telephone number should have at least 11 numbers.</p>
</div>
</form>
</div>
</div>

Your form is validating.. in order to call requestCallback() function, you need to bind your form to controller.
Wrap your form inside controller with ng-controller
<div ng-controller="footerController">
<form name="callbackForm" ng-submit="requestCallback()">
<div class="col-md-3">
<input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required=""/>
</div>
<div class="col-md-3">
<input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required=""/>
</div>
<div class="col-md-3">
<input type="submit" class="btn btn-sm btn-block" value="Call Me!">
</div>
<div class="col-md-3">
<p ng-show="callbackForm.name.$error.required" || callbackForm.name.$error.minlength class="help-block">Your name is required.</p>
<p ng-show="callbackForm.telephone.$invalid && !callbackForm.telephone.$pristine" class="help-block">Your telephone number is required.</p>
</div>
</form>
</div>
</div>

$window.location is not working in ipad only with angular js

**my angular function **
self.login = function () {
loginService.login(self.user).success(function (response) {
sessionService.set("token", response.response.token);
$window.location.href = "/camera";
}).error(function (response) {
flashService.showError(response.message);
});
}
my html code
<form name="myForm" class="row" ng-submit = loginCtrl.login() novalidate>
<label>Username or email</label>
<div class='form-group' ng-class="{ 'has-error' : myForm.userName.$invalid && !myForm.userName.$pristine }">
<input type="text" name="userName" class="input-block-level form-control" placeholder="Your username or email" ng-model = "loginCtrl.user.email" required/>
<p ng-show="myForm.userName.$invalid && !myForm.userName.$pristine" class="help-block">Please enter the username or email.</p>
</div>
<label >Password <a class="password" href="javascript:void(0)" data-toggle="modal" ng-click="loginCtrl.openForgetPasswordModal('md')" >forgot it?</a></label>
<div class='form-group' ng-class="{ 'has-error' : myForm.password.$invalid && !myForm.password.$pristine }">
<input type="password" name= "password" class="input-block-level form-control margin-none" placeholder="Your password" ng-model = "loginCtrl.user.password" required/>
<p ng-show="myForm.password.$invalid && !myForm.password.$pristine" class="help-block">Please fill up the password.</p>
</div>
<div class="separator bottom"></div>
<div class="col-md-8 padding-none ">
<div class="uniformjs"><label class="checkbox theme-color"><input type="checkbox" value="remember-me" ng-model = "loginCtrl.remember" ng-click="loginCtrl.rememberMe()"remember-me>Remember me</label>
</div>
</div>
<div class="col-md-4 pull-right padding-none">
<button class="btn btn-block btn-primary" type="submit">Sign In</button>
</div>
</form>
I want when i click on login button then it will be redirect on seprate page.but window location is not working here.

use this:
$location.path('/camera');

Controller as vm with ng-click

I am trying to follow John Papa's Angular Style Guide however i cannot get the model data of input file with ngClick.
When i try with $scope everything works just fine.
Here is the Demo on Plnkr.
Glad for your help.

In the ng-model instead of assigning directly to vm, assign it to vm.data and pass vm.data as argument to ng-click like data-ng-click="vm.saveEvent(vm.data)"
<form>
<fieldset>
<div class="form-group">
<label for="eventName">Event Name:</label>
<input id="eventName" type="text" data-ng-model="vm.data.name" placeholder="Name of your event"/>
</div>
<div class="form-group">
<label for="eventDate">Event Date:</label>
<input id="eventDate" type="text" data-ng-model="vm.data.date" placeholder="format (mm/dd/yyyy)"/>
</div>
<div class="form-group">
<label for="eventTime">Event Time:</label>
<input id="eventTime" type="text" data-ng-model="vm.data.time" placeholder="Time of your event"/>
</div>
<div class="form-group">
<label for="eventLocation">Event Location:</label>
<input id="eventLocation" type="text" data-ng-model="vm.data.location.addresss" placeholder="Address of your event"/>
</div>
<div class="form-group">
<input id="eventCity" type="text" class="input-small" data-ng-model="vm.data.location.city" placeholder="City"/>
<input id="stateProvince" type="text" class="input-small" data-ng-model="vm.data.location.province" placeholder="Province"/>
</div>
<div class="form-group">
<label for="eventImageUrl">Image:</label>
<input id="eventImageUrl" type="text" class="input-xlarge" data-ng-model="vm.data.imageUrl" placeholder="Url of image"/>
</div>
</fieldset>
{{vm.data.name}}
<img data-ng-src="{{vm.data.imageUrl}}"/>
<br/>
<br/>
<div class="form-group">
<button type="submit" class="btn btn-primary" data-ng-click="vm.saveEvent(vm.data)">Save</button>
<button type="button" class="btn btn-default" data-ng-click="vm.cancelEvent(vm.data)">Cancel</button>
</div>
</form>
Controller:
eventsApp.controller('EditEventController',
function EditEventController() {
var vm = this;
this.data = {};
vm.saveEvent = saveEvent;
function saveEvent(event) {
window.alert("event" + event.name + ' saved');
console.log(vm.data);
}
//vm.saveEvent = function(event) {
// window.alert("event" + event.name + ' saved');
//};
}
);
http://plnkr.co/edit/AxdA7vc70aTw3RojofVY?p=preview

ng-click="vm.saveEvent(vm.data)" did not work for me with Angular 1.4.
My solution was to use the control variable name.
e.g. "LoginController as loginctrl" so <button ng-click="loginctrl.doLogin()">Login</button>
Then in my control I was able to use this for the doLogin function inside my LoginController:
/* #ngInject */
function LoginController() {
/*jshint validthis: true */
var vm = this;
vm.title = 'Login';
function doLogin() {
...
}