I have a couple of fields that I would like to replicate dynamically. I'm using ng-reapt which is doing the job. However, the validation messages are not working. Here's what I've got:
<html ng-app="app">
<head>
<title>teste</title>
</head>
<body ng-controller='testController'>
<label>Number of Workers</label>
<select ng-model="quantity" ng-change="changed()">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<form name='frm' action='/workers/add' method='POST'>
<div ng-repeat="i in numberOfWorkers track by $index">{{$index + 1}}
<div>
<label>First Name</label>
<input class="fullSize" letters-only placeholder="Please enter your name" type="text" name="firstName" ng-model="workers[$index].firstName" ng-minlength="3" ng-maxlength="50" ng-required="true" maxlength="50">
<span ng-cloak class="error-container" ng-show="submitted || showErrors(frm.firstName)">
<small class="error" ng-show="frm.firstName[{{$index}}].$error.required">* Please enter your name.</small>
<small class="error" ng-show="frm.firstName[{{$index}}].$error.minlength">* At least 3 chars.</small>
<small class="error" ng-show="frm.firstName[{{$index}}].$error.maxlength">* No more than 50 chars.</small>
</span>
</div>
<div>
<label>Surname</label>
<input class="fullSize" letters-only placeholder="Please enter your surname" type="text" name="surName" ng-model="workers[$index].surName" ng-minlength="3" ng-maxlength="50" ng-required="true" maxlength="50">
<span ng-cloak class="error-container" ng-show="submitted || showErrors(frm.surName)">
<small class="error" ng-show="frm.surName[$index].$error.required">* Please enter your name.</small>
<small class="error" ng-show="frm.surName[$index].$error.minlength">* At least 3 chars.</small>
<small class="error" ng-show="frm.surName[$index].$error.maxlength">* No more than 50 chars.</small>
</span>
</div>
<div>
<label>Email</label>
<input class="grid-full" placeholder="Please enter your e-mail" type="email" name="email" ng-model="workers[$index].email" ng-minlength="3" ng-maxlength="50" required maxlength="50">
<span class="error-container" ng-show="submitted || showErrors(frm.email)">
<small class="error" ng-show="frm.email[$index].$error.required">* Please enter your E-mail.</small>
<small class="error" ng-show="frm.email[$index].$error.email">* Invalid email.</small>
</span>
</div>
</div>
</form>
<button ng-click="test()">test</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller('testController',['$scope', function($scope){
$scope.quantity = 1;
$scope.submitted = false;
$scope.numberOfWorkers = [1];
$scope.workers = [];
$scope.getNumber = function (num) {
return new Array(num);
};
$scope.test = function(){
console.log($scope.workers);
};
$scope.changed = function() {
$scope.workers = [];
$scope.numberOfWorkers = new Array(parseInt($scope.quantity));
}
$scope.isUndefined = function (thing) {
var thingIsUndefined = (typeof thing === "undefined");
return thingIsUndefined;
};
$scope.showErrors = function (field) {
var fieldIsUndefined = $scope.isUndefined(field);
if (fieldIsUndefined == false)
{
var stateInvalidIsUndefined = $scope.isUndefined(field.$invalid);
var stateDirtyIsUndefined = $scope.isUndefined(field.$dirty);
return (fieldIsUndefined == false && stateInvalidIsUndefined == false && stateDirtyIsUndefined == false &&
(field.$invalid && field.$dirty));
}
return false;
};
}]);
</script>
</body>
</html>
Is there a way to display and validate fields using the index position?
frm.firstName.$error.minlength
The code above works for the first block, but it display the message to all copies.
I think this along the lines of what you're trying to achieve:
http://plnkr.co/edit/HVwnRfvt30WrsteY6DvW
We need to assign a dynamic name to each input field, by way of using the $index of the ngRepeat:
<form name="form">
<div ng-repeat="entry in array track by $index">
<input type="text" name="someField{{$index}}">
<div>
</form>
And based on the number of entries in array, we can access in a loop each dynamically created someField using the syntax below:
form['someField' + $index]
In your case, let's say we have three workers, and the second worker's firstName is invalid -- in an ngRepeat, it would look like this:
<div ng-repeat="i in numberOfWorkers track by $index">
isValid? --> form.firstName{{$index}}.$valid = {{form['firstName' + $index].$valid}}
</div>
Output:
isValid? --> form.firstName0.$valid = true
isValid? --> form.firstName1.$valid = false
isValid? --> form.firstName2.$valid = true
Related
I have implemented validation system in forms and it working fine.
Here is my form:
<form name='addContactForm'>
<div class="form-group">
<label for="userid">USER ID :</label><br>
<input ng-model="formModel.userid" class="form-control" name="userid" restrict-input="{type: 'digitsOnly'}" required>
<span style="color:red" ng-show="addContactForm.userid.$dirty && addContactForm.userid.$invalid">
<span ng-show="addContactForm.userid.$error.required"> User is required.</span>
<span ng-show="addContactForm.userid.$error.number">Invalid userID</span>
</div>
<div class="form-group">
<label for="name">NAME :</label><br>
<input ng-model="formModel.name" class="form-control" name="name" required/>
<span style="color:red" ng-show="addContactForm.name.$dirty && addContactForm.name.$invalid">
<span ng-show="addContactForm.name.$error.required"> Name is required.</span>
<span ng-show="addContactForm.name.$error.lettersOnly">Invalid Name</span>
</span>
</div>
<div class="form-group">
<label for="email">Email :</label> <br>
<input type="email" name="email" class="form-control" ng-model="formModel.email" ng-pattern="/[\w\d\.\_]+\#[\w\d]+\.[\w]{3}/" required>
<span style="color:red" ng-show="addContactForm.email.$dirty && addContactForm.email.$invalid">
<span ng-show="addContactForm.email.$error.required">Email is required.</span>
<span ng-show="addContactForm.email.$error.pattern">Invalid email address.</span>
</span>
</div>
<div class="form-group">
<label for="phone">Phone :</label> <br>
<input ng-model="formModel.phone" class="form-control" name="phone" restrict-input="{type: 'digitsOnly'}" required>
<span style="color:red" ng-show="addContactForm.phone.$dirty && addContactForm.phone.$invalid">
<span ng-show="addContactForm.phone.$error.required"> Phone Number is required.</span>
</span>
</div>
<div class="row justify-content-center">
<button class="btn btn-primary" ng-disabled="addContactForm.$invalid" ng-click="PassDataToDisplyThroughUrl()">Submit</button> <br>
</div>
</form>
</div>
Note that, above things are working fine.
my controller is below:
app.controller('formCtrl', ['$scope', '$location', '$http',
function($scope, $location, $http) {
$scope.formModel = {};
$scope.PassDataToDisplyThroughUrl = function() {
var url = 'display/' + $scope.formModel.userid + '/' + $scope.formModel.name
+ '/' + $scope.formModel.email + '/' + $scope.formModel.phone;
$location.path(url);
$http.post('http://127.0.0.1:8000/api/v1/contact/', $scope.formModel)
.then(function(response){
$scope.successCallBack = 'You have successfully saved your contact';
}, function(response){
$scope.errorCallBack = 'Opps! Unable to save your data, please check your network';
});
$scope.formModel = {};
$scope.addContactForm.$setPristine();
};
}]);
After i clicking on submit button -- it clear the form and send to the server. but the problem is, it shows me the validation error later
Can anyone fix me this issue?
It seems that none of the functions in this JSFiddle are being called -
http://jsfiddle.net/2x4yt0vb/11/
There are functions for validation and a clear function. None of the validations are working. For example if -20 or aaa is entered in the form "Invalid entry" and other error messages should be displayed. When the Clear button is clicked none of the functionality within the clear() function is firing. Why aren't these functions working in JSFiddle?
Here is the HTML:
<html ng-app="myApp">
<div ng-controller="formulaCtrlr" >
<form name="vm.formContainer.form" autocomplete="off">
<div class="form-group" ng-class="{'has-error': vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$invalid}">
<label for="FatA" class="col-sm-2 control-label">Fat A</label>
<input name="FatA" type="text" class="form-control col-sm-10 input-sm" ng-required="true" ng-model-options="{updateOn: 'blur'}" ui-validate="{numberCheck: 'vm.numberCheck($value)', fatRangeCheck: 'vm.fatRangeCheck($value)'}" ng-model="vm.formulaInput.Fats[0]" /><span>%</span>
<span class="error" ng-show="vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$invalid">Invalid entry.</span>
<span class="error" ng-show="vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$error.numberCheck">{{vm.errorMessages.numberCheck}}</span>
<span class="error" ng-show="vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$error.fatRangeCheck">{{vm.errorMessages.fatRangeCheck}}</span>
</div>
<div class="form-group" ng-class="{'has-error': vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$invalid}">
<label for="FatB" class="col-sm-2 control-label">Fat B</label>
<input name="FatB" type="text" class="form-control col-sm-10 input-sm" ng-required="true" ng-model-options="{updateOn: 'blur'}" ui-validate="{numberCheck: 'vm.numberCheck($value)', fatRangeCheck: 'vm.fatRangeCheck($value)'}" ng-model="vm.formulaInput.Fats[1]" /><span>%</span>
<span class="error" ng-show="vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$invalid">Invalid entry.</span>
<span class="error" ng-show="vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$error.numberCheck">{{vm.errorMessages.numberCheck}}</span>
<span class="error" ng-show="vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$error.fatRangeCheck">{{vm.errorMessages.fatRangeCheck}}</span>
</div>
<div class="col-sm-offset-2">
<input type="reset" value="Clear" class="btn btn-default" ng-click="vm.clear()" ng-disabled="vm.formContainer.form.$pristine" />
</div>
</form>
<div>formula input: {{vm.formulaInput}}</div>
</div>
</html>
Here is the JS/Angular:
angular.module('myApp', [])
.controller("formulaCtrlr", ['$scope', function ($scope) {
var vm = this;
vm.formContainer = {
form: {}
}
vm.formulaInput = {};
vm.formulaInput.Fats = [];
vm.clear = function () {
vm.formulaInput = {};
vm.formulaInput.Fats = [];
vm.formContainer.form.$setPristine();
}
vm.errorMessages = {
numberCheck: 'Value must be a number.',
fatRangeCheck: 'Number must be between 0 and 100.'
}
vm.numberCheck = function (value) {
var result = !(isNaN(parseFloat(value)));
return result;
//return !(isNaN(parseFloat(value)));
}
vm.fatRangeCheck = function (value) {
var result = (value && value > 0.0 && value < 100.0);
return result;
//return (value && value > 0.0 && value < 100.0);
}
}]);
With Angular I use specific directive for validate single input field. (i.e. email, username etc.)
In this project I have this scenario:
I need to set an Advance Payment field, this Advance must be between min/max value.
To set the Advance I have three input text:
Cash
Old Car Value
Financed Advance
the sum of those three input is my Advance value.
So I need to validate Advance but I have no a single input with ng-model setted on.
What is the best way to check and validate the Advance Payment value?
I need to add a directive to all those three input fields? or is better a directive for the form?
Any suggestion will be appreciated.
jsfiddle example
(function () {
var app = angular.module("myApp", ['ngMessages']);
app.controller('myFormCtrl', function($scope) {
$scope.plan = {};
$scope.plan.advance = 0;
$scope.plan.min_advance = 3000;
$scope.plan.max_advance = 6000;
$scope.updateAdvance = function(){
var advance = 0;
if ($scope.quotationAdvanceType && !isNaN($scope.plan.quotation))
advance += $scope.plan.quotation;
if ($scope.cashAdvanceType && !isNaN($scope.plan.cash))
advance += $scope.plan.cash;
if ($scope.financedAdvanceType && !isNaN($scope.plan.financed))
advance += $scope.plan.financed;
$scope.plan.advance = advance;
}
});
})();
Just to give you (and perhaps others) another option.
To simplify, you can use a number input with its ng-model set to plan.advance. This will allow you to use the min/max attributes. You can set the input to hidden if you prefer not to display it.
<input type="number" name="advance" ng-model="plan.advance" min="{{plan.min_advance}}" max="{{plan.max_advance}}" hidden />
Then you can use the built in validation for min and max such as:
<span ng-messages="myForm.advance.$error" role="alert">
<span ng-message="min">Minimum not reached.</span>
<span ng-message="max">Maximum exceeded.</span>
</span>
Run the code snippet below to see it in action:
(function () {
var app = angular.module("myApp", ['ngMessages']);
app.controller('myFormCtrl', function ($scope) {
var advance = [];
$scope.plan = {};
$scope.plan.advance = 0;
$scope.plan.min_advance = 3000;
$scope.plan.max_advance = 6000;
$scope.reset = function(val) {
$scope.plan[val] = undefined;
$scope.updateAdvance();
};
$scope.updateAdvance = function () {
advance = [$scope.plan.quotation, $scope.plan.cash, $scope.plan.financed];
$scope.plan.advance = advance.reduce(function (a, b) {
a = a ? a : 0;
b = b ? b : 0;
return a + b;
}, 0);
}
});
})();
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
<script src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-messages.min.js"></script>
<div ng-app="myApp" class="container">
<form name="myForm" ng-controller="myFormCtrl" class="form-horizontal">
<div class="form-group" ng-class="{ 'has-error' : myForm.plan.min_advance.$invalid && myForm.plan.min_advance.$touched}">
<label for="plan.min_advance" class="control-label col-xs-4 col-sm-2">Min Advance</label>
<div class="col-xs-8 col-sm-10">
<input type="number" ng-model="plan.min_advance" class="form-control" />
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : myForm.plan.max_advance.$invalid && myForm.plan.max_advance.$touched}">
<label for="plan.max_advance" class="control-label col-xs-4 col-sm-2">Min Advance</label>
<div class="col-xs-8 col-sm-10">
<input type="number" ng-model="plan.max_advance" class="form-control" />
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : myForm.surname.$invalid && myForm.surname.$touched}">
<div class="col-xs-12">
<label for="surname" class="control-label">Surname</label>
<input type="text" value="" name="surname" id="surname" ng-model="surname" ng-minlength="3" ng-mAXlength="20" required="required" class="form-control" />
<span ng-messages="myForm.surname.$error" class="help-block" role="alert" ng-show="myForm.surname.$touched">
<span ng-message="required">You forgot to enter your surname</span>
<span ng-message="minlength">Surname is too short</span>
<span ng-message="maxlength">Surname is too long</span>
</span>
</div>
</div>
<p>Set the Advance between minimun <strong>{{plan.min_advance | currency}}</strong> and maximum <strong>{{plan.max_advance | currency}}</strong>
</p>
<div class="form-group">
<label for="quotation" class="col-xs-4 col-sm-2 control-label">
<input type="checkbox" name="quotationAdvanceType" ng-model="quotationAdvanceType" ng-change="reset('quotation')"/> Quotation:
</label>
<div class="col-xs-8 col-sm-10">
<input type="number" name="quotation" ng-value="plan.quotation" ng-model="plan.quotation" ng-change="updateAdvance()" class="form-control" ng-disabled="!quotationAdvanceType" placeholder="{{'max '+ (plan.max_advance-plan.advance)}}" />
</div>
</div>
<div class="form-group">
<label for="cash" class="col-xs-4 col-sm-2 control-label">
<input type="checkbox" name="cashAdvanceType" ng-model="cashAdvanceType" ng-change="reset('cash')" /> Cash:
</label>
<div class="col-xs-8 col-sm-10">
<input type="number" name="cash" ng-value="plan.cash" ng-model="plan.cash" ng-change="updateAdvance()" class="form-control" ng-disabled="!cashAdvanceType" placeholder="{{'max '+ (plan.max_advance-plan.advance)}}" />
</div>
</div>
<div class="form-group">
<label for="financed" class="col-xs-4 col-sm-2 control-label">
<input type="checkbox" name="financedAdvanceType" ng-model="financedAdvanceType" ng-change="reset('financed')" /> Financed:
</label>
<div class="col-xs-8 col-sm-10">
<input type="number" name="financed" ng-value="0" ng-model="plan.financed" ng-change="updateAdvance()" class="form-control" ng-disabled="!financedAdvanceType" placeholder="{{'max '+ (plan.max_advance-plan.advance)}}" />
</div>
</div>
<div ng-class="{'has-error' : myForm.advance.$invalid && (quotationAdvanceType || cashAdvanceType || financedAdvanceType) && (myForm.quotation.$dirty || myForm.cash.$dirty || myForm.financed.$dirty)}">
<input type="number" name="advance" ng-model="plan.advance" min="{{plan.min_advance}}" max="{{plan.max_advance}}" hidden />
<p class="help-block">Total Advance: <strong>{{plan.advance ? (plan.advance | currency) : 'none'}}</strong>
<span ng-messages="myForm.advance.$error" role="alert" ng-show="myForm.quotation.$dirty || myForm.cash.$dirty || myForm.financed.$dirty">
<span ng-message="min">Minimum not reached.</span>
<span ng-message="max">Maximum exceeded.</span>
</span>
</p>
</div>
<button type="submit" class="btn btn-primary" ng-disabled="myForm.$invalid">Send</button>
</form>
</div>
Is there an advantage over your custom directive approach? I would say yes and here's why:
Your directive is tightly coupled to your controller scope, so you can't reuse it elsewhere in your application and it will require you to separately update it if you change one of your scope variables in the future.
You are essentially duplicating code for functionality that already exists in the framework. That results in more upfront cost of development and maintenance effort down the line.
I solve my question with a brand new directive.
I don't know if this is the right way to do that, but it works fine and the behaviour is correct.
app.directive('totalAdvance', function() {
return {
restrict: 'E',
require: '^form',
link: function(scope, element, attrs, formCtrl) {
var advanceValue = 0;
var advanceValidator = function() {
if (advanceValue >= attrs.min && advanceValue <= attrs.max){
formCtrl.$setValidity('minAdvance', true);
formCtrl.$setValidity('maxAdvance', true);
return advanceValue;
}else if (advanceValue < attrs.min) {
formCtrl.$setValidity('minAdvance', false);
formCtrl.$setValidity('maxAdvance', true);
return null;
}else if (advanceValue > attrs.max){
formCtrl.$setValidity('minAdvance', true);
formCtrl.$setValidity('maxAdvance', false);
return null;
}
};
scope.$watch('plan.advance', function(value) {
advanceValue = value;
return advanceValidator();
});
scope.$watch('plan.min_advance', function() {
return advanceValidator();
});
scope.$watch('plan.max_advance', function() {
return advanceValidator();
});
}
};
});
jsfiddle example
I've a form below
<form class="form-horizontal" role="form" name="req_appmt" id="req_appmt" novalidate ng-submit="SendAppointmentRequest()">
<div class="form-group" ng-class="(req_appmt.form_comments.$error.required) ? 'has-error' : '' ">
<label for="form_comments" class="col-lg-2 control-label">Reason for Appointment* :</label>
<div class="col-lg-10"><textarea id="form_comments" name="form_comments" ng-model="formdata.form_comments" class="form-control" rows="3" required></textarea></div>
</div>
<div class="form-group" ng-class="(req_appmt.physician_id.$error.required) ? 'has-error' : '' ">
<label for="physician_id" class="col-lg-2 control-label">To* :</label>
<div class="col-lg-10">
<select name="physician_id" ng-model="formdata.physician_id" id="physician_id" class="form-control" required>
<option value="">--Select--</option>
<option ng-repeat="physician in physicians" value="{{physician.id}}">{{physician.fullname}}</option>
</select>
</div>
</div>
<div class="form-group" ng-class="(req_appmt.date.$error.required) ? 'has-error' : '' ">
<label for="inputEmail1" class="col-lg-2 control-label">Date :</label>
<div class="col-lg-10">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="dd-MM-yyyy" ng-model="formdata.date" name="date" is-open="opened" min-date="minDate" close-text="Close" required="required" ng-click="open($event)">
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<div class="form-group" ng-class="(req_appmt.time.$error.required) ? 'has-error' : '' ">
<label for="inputEmail1" class="col-lg-2 control-label">Free Slot :</label>
<div class="col-lg-10">
<select name="time" ng-model="formdata.time" id="time" class="form-control" required>
<option value="">--Select--</option>
<!-- <option ng-repeat="key,value in slots" value="{{value}}">{{value}}</option> -->
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10"><p>
<button type="submit" class="btn btn-primary btn-lg btn-success">Request Appointment</button>
Cancel
</p> </div> </div>
</form>
This is my controller :
ModuleEvents.controller('ctrlRequestAppointment', function ($location,$scope,$http,$rootScope,$cookies,ServiceCheckAuth,ServiceEvents){
/*First check patient is logged in*/
if( !ServiceCheckAuth.isPatientLoggedIn() ){
$location.url('/login');
return;
}
/*Set rootScope values*/
$rootScope.root = {
html_title:HTML_TITLE_PATIENT_APPOINTMENT_REQUEST,
loggedin:true,
activeNxtstp:'active',
customclass:'content_inner_im w-100-mob'
};
var json_physicians = localStorage.getItem('physicians');
$scope.minDate = $scope.minDate ? null : new Date();
$scope.date = new Date();
$scope.physicians = JSON.parse(json_physicians);
$scope.formdata = {};
$scope.opened = false;
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.$watch(req_appmt.date.$valid, function() {
if( req_appmt.date.$valid && req_appmt.physician_id.$valid ){
console.log($scope.formdata);
}
});
$scope.SendAppointmentRequest = function(){
if( $scope.req_appmt.$valid ){
console.log($scope.formdata);
}
}
});
What I'm trying :
1) User selects To field in the form
2) then user selects date field in the form
3) then I want to check in controller both are filled and validated
4) then I want to fire a ajax request that will populate the Free Slot field of he form
Problem :
I can not check whether the fields are valid
Any help is greatly appreciated
Thanks
can you use an function() which can validate all fields of formdata like
$scope.function_name=function()
{
var validatefalg=true;
if($scope.formdata.physician_id!='')
{
validatefalg=false;
return validatefalg;
}
else
{
return validatefalg;
}
}
I solve my problem with the help of #jyotsna :
if( $scope.req_appmt.physician_id.$valid && $scope.req_appmt.date.$valid ){}
I have tried this code..
<script>
angular.module('emailExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.text = 'me#example.com';
}]);
</script>
<form name="myForm" ng-controller="ExampleController">
Email: <input type="email" name="input" ng-model="text" required>
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.email">
Not valid email!</span>
<tt>text = {{text}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
<tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/>
</form>
But getting issue in validation. Say if i try to enter 'a#a.c' in email then it will not show any error. Please help me on this.
I am thinking why you are not using ng-pattern for this. You can make a regular expression and put inside ng-pattern.
Example:
<form name="signupFrm">
<input type="email", ng-pattern="emailPattern">
</form>
or,
HTML:
<div ng-class="{'has-error': signupFrm.email.$dirty && signupFrm.email.$invalid}">
<input type="email" placeholder="Email" name="email" ng-pattern="emailPattern" required="required">
<div ng-show="signupFrm.email.$dirty && signupFrm.email.$invalid || signupFrm.email.$error.pattern">
<span ng-show="signupFrm.email.$error.pattern && signupFrm.email.$invalid " class="help-block"> should look like an email address</span>
<span ng-show=" signupFrm.email.$error.required" class="help-block">can't be blank</span>
</div>
</div>
JS:
$scope.emailPattern = /^([a-zA-Z0-9])+([a-zA-Z0-9._%+-])+#([a-zA-Z0-9_.-])+\.(([a-zA-Z]){2,6})$/;