I have a form that I want to validate with ng-click, I have some required fields e some fields like email.
<form role="form" name="cadastroEmpresa"
novalidate>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-6">
<div class="form-group">
<label>Nome</label>
<input class="form-control"
placeholder="Nome da empresa"
ng-model="empresa.nome">
</div>
<div class="form-group">
<label>CNPJ</label>
<input
id="cnpj"
class="form-control"
placeholder="Entre com o CNPJ"
ng-model="empresa.cnpj">
</div>
<div class="form-group">
<label>Endereço</label>
<input type="email"
name="inputemail"
class="form-control"
placeholder="Entre com o endereço pela empresa"
ng-model="empresa.endereco">
</div>
<div class="form-group">
<label>Email</label>
<input
type="email"
class="form-control"
placeholder="Email da empresa"
ng-model="empresa.email">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Nome do Responsável</label>
<input class="form-control"
placeholder="Nome do responsável da empresa"
ng-model="empresa.nomeResponsavel" required>
</div>
<div class="form-group">
<label>Telefone</label>
<input class="form-control"
id="telefone"
placeholder="Telefone fixo"
ng-model="empresa.telefone" required>
</div>
<div class="form-group">
<label>Celular</label>
<input class="form-control"
id="celular"
ng-model="empresa.celular"
placeholder="Telefone celular">
</div>
<div class="form-group">
<label>Data de Vencimento</label>
<input class="form-control"
ng-model="empresa.dataVencimentoMensalidade"
placeholder="Data de Vencimento da Mensalidade">
</div>
</div>
</div>
</div>
</form>
I Want to validate when user clicks the button, and mark in red the field that have erros, but I'm pretty new with angular so I not sure how I do that, if some one could give me example I'll be able to finish my application. Thank you everyone.
As mentioned in Gonzalo's answer, "you should be add attribute name to the inputs that you want validate".
After it, you can use ngMessages to validate your inputs.
Here's a snippet working:
var app = angular.module('app', ['ngMessages']);
app.controller('mainCtrl', function ($scope) {
// Any JS code.
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" ></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular-messages.js"></script>
</head>
<body ng-controller="mainCtrl">
<form role="form" name="form" novalidate>
<div class="form-group" ng-class="{ 'has-error' : form.nome.$touched && form.nome.$invalid }">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-6">
<div class="form-group">
<label>Nome</label>
<input name="nome" class="form-control" placeholder="Nome da empresa" ng-model="empresa.nome" required="" />
</div>
<div class="help-block" ng-messages="form.nome.$error" ng-if="form.nome.$touched">
<!-- <div ng-messages-include="error-messages.html"></div> -->
</div>
</div>
</div>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : form.cnpj.$touched && form.cnpj.$invalid }">
<label>CNPJ</label>
<input id="cnpj" name="cnpj" class="form-control" placeholder="Entre com o CNPJ" ng-model="empresa.cnpj" required="" />
<div class="help-block" ng-messages="form.cnpj.$error" ng-if="form.cnpj.$touched">
<!-- <div ng-messages-include="error-messages.html"></div> -->
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : form.end.$touched && form.end.$invalid }">
<label>Endereço</label>
<input name="end" class="form-control" placeholder="Entre com o endereço pela empresa" ng-model="empresa.endereco" required="" />
<div class="help-block" ng-messages="form.end.$error" ng-if="form.end.$touched">
<!-- <div ng-messages-include="error-messages.html"></div> -->
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : form.email.$touched && form.email.$invalid }">
<label>Email</label>
<input type="email" name="email" class="form-control" placeholder="Email da empresa" ng-model="empresa.email" />
<div class="help-block" ng-messages="form.email.$error" ng-if="form.email.$touched">
<!-- <div ng-messages-include="error-messages.html"></div> -->
</div>
</div>
<div class="col-lg-6" ng-class="{ 'has-error' : form.resp.$touched && form.resp.$invalid }">
<div class="form-group">
<label>Nome do Responsável</label>
<input name="resp" class="form-control" placeholder="Nome do responsável da empresa" ng-model="empresa.nomeResponsavel" required="" />
<div class="help-block" ng-messages="form.resp.$error" ng-if="form.resp.$touched">
<!-- <div ng-messages-include="error-messages.html"></div> -->
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : form.fixo.$touched && form.fixo.$invalid }">
<label>Telefone</label>
<input name="fixo" class="form-control" id="telefone" placeholder="Telefone fixo" ng-model="empresa.telefone" required="" />
<div class="help-block" ng-messages="form.fixo.$error" ng-if="form.fixo.$touched">
<!-- <div ng-messages-include="error-messages.html"></div> -->
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : form.celular.$touched && form.celular.$invalid }">
<label>Celular</label>
<input name="celular" class="form-control" id="celular" ng-model="empresa.celular" placeholder="Telefone celular" />
<div class="help-block" ng-messages="form.celular.$error" ng-if="form.celular.$touched">
<!-- <div ng-messages-include="error-messages.html"></div> -->
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : form.data.$touched && form.data.$invalid }">
<label>Data de Vencimento</label>
<input name="data" class="form-control" ng-model="empresa.dataVencimentoMensalidade" placeholder="Data de Vencimento da Mensalidade" />
<div class="help-block" ng-messages="form.data.$error" ng-if="form.data.$touched">
<!-- <div ng-messages-include="error-messages.html"></div> -->
</div>
</div>
<div class="form-group">
<input type="submit" name="commit" value="Criar empresa" class="btn btn-primary" ng-disabled="form.$invalid">
<a class="btn btn-default" href="#">Cancelar</a>
</div>
</div>
</form>
</body>
</html>
I would recommend you to check this tutorial also.
PS: As you may have noticed I commented all the "ng-include" (which contains the file that contains all the messages to show when input is invalid) that I put, because I don't know even if is possible to add a new "file" here in snippet, but I'm posting here almost the complete code and you can check the complete here.
error-messages.html:
<p ng-message="required">This field is required</p>
<p ng-message="minlength">This field is too short</p>
<p ng-message="maxlength">This field is too long</p>
<p ng-message="required">This field is required</p>
<p ng-message="email">This needs to be a valid email</p>
I hope it helps!!
Firstly, you should be add attribute name to the inputs that you want validate.
Then In the controller, more specifically in the $scope object, you have available a key with the name of your form, and inside this, keys associated to each input that you added a name attrubute.
Example based in your html:
angular
.module('exampleApp')
.controller('ExampleController', Controller);
Controller.$inject = ['$scope'];
function Controller($scope){
var vm = this;
var theForm = $scope.cadastroEmpresa;
console.log(theForm);
vm.handleValidation = function(){
var theForm = $scope.cadastroEmpresa;
console.log($scope);
console.log($scope.cadastroEmpresa);
}
}
Working
http://codepen.io/gpincheiraa/pen/GqEmNP
Form validation works when automatically when you submit the form. So you should add a submit type button anywhere inside the form like:
<button type="submit" class="btn btn-primary">Submit data</button>
And if you now require proper validation message and if you are using Bootstrap library, you can check out this library to provide validation messages in Angular with Bootstrap.
You just need to create a CSS for that, angular already adds the required classes for validation.
this class is added automatically to required fields, you just need to give it your style, for example:
.ng-submitted .ng-invalid {
color: #f00;
border: 1px solid #f00;
}
Codepen: http://codepen.io/giannidk/pen/Bzkkaj?editors=1001
Related
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 need one example for validations on dynamic added fields. Here is my page.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js">
</script>
<title>Add Remove in AngularJS</title>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.deleted = [];
$scope.inputs = [];
$scope.addRow = function(){
$scope.inputs.push({name:'', age:''});
};
$scope.removeRow = function(index, input){
// alert(index);
// alert(input);
$scope.deleted.push(input);
$scope.inputs.splice(index,1);
};
});
</script>
</head>
<body style="background-color: gray; margin-top: 10px; ">
<center>
<div class="row" ng-app="myApp" ng-controller="myCtrl">
<div class="col-md-6">
<div class="panel panel-flat">
<div class="panel-header">
<h4>
Person Address
<button ng-click="addRow()">Add</button>
</h4>
</div>
<div class="panel-body">
<form name="form" class="form-horizontal">
<div ng-repeat="input in inputs">
<div class="form-group" ng-class="{'has-error' : form.name.$invalid}">
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name[$index]" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span class="help-block" ng-show="form.name[$index].$error.pattern">Alphabet only</span>
<span class="help-block" ng-show="form.name[$index].$error.minlength">Too Short</span>
<span class="help-block" ng-show="form.name[$index].$error.maxlength">Too Long</span>
<span class="help-block" ng-show="form.name[$index].$error.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span ng-show="form.age.$invalid && form.age.$error.pattern">Number
length should be 3</span>
</div>
</div>
<button ng-click="removeRow($index, input)">Remove</button>
<hr>
</div>
</form>
</div>
</div>
</div>
<!-- inputs :{{inputs}}<br>deleted : {{deleted}} -->
</div>
</center>
</body>
</html>
You can add a fonction to you controller :
app.controller('myCtrl', function($scope) {
//...
$scope.validationFn = function () {
//do you validation here
};
then you just need to modify
<form name="form" class="form-horizontal" ng-submit="validationFn()">
Here is the answer:
<div class="panel-body"><form name="form" class="form-horizontal">
<div ng-repeat="input in inputs"><ng-form name="sfIn"><div class="form-group" >
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span
class="help-block" ng-show="sfIn.name.$error.pattern">Alphabet only</span>
<span
class="help-block" ng-show="sfIn.name.$error.minlength">Too Short</span>
<span
class="help-block" ng-show="sfIn.name.$error.maxlength">Too Long</span>
<span
class="help-block" ng-show="sfIn.name.$touched.required || sfIn.name.$error.required ||
sfIn.name.$dirty.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span
ng-show="sfIn.age.$error.pattern">Number
length should be 3</span>
</div>
</div>
<button
ng-click="removeRow($index, input)">Remove</button>
</ng-form>
<hr>
</div>
</form>
</div>
I am working on AngularJS with ui-grid. In the grid when i edit a row I am opening a modal window like this
$scope.editRow = function(row){
var modalInstance = $modal.open({
templateUrl : contextPath+ '/row/edit',
controller : 'EditController',
size : 'lg',
scope: $scope,
resolve : {
result : function() {
return row;
}
}
});
modalInstance.result.then(function() {
.......
});
}
and the model window gets open with the row details after calling Editcontroller default function. Until this point it is working fine.
Now i am trying to do the validation on the opened modal window using AngularUI and the validation is not working. Below is my UI page where the validation is not working
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
<h3 align="center">Edit Row Details</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" name="myform" ng-submit="submitForm(myform.$valid)" novalidate>
<!-- Content Start -->
<div class="container">
<div class="row">
<div class="form-group required"
ng-class="{ 'has-error' : myform.name.$invalid && !myform.name.$pristine }">
<label for="name" class="control-label"> Name
</label>
<div>
<input type="text" name="myform.name" class="form-control input-sm"
ng-model="myform.name" placeholder="Name"
required />
<p ng-show="myform.name.$invalid && !myform.name.$pristine" class="help-block"> Name is required.</p>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div>
<button type="submit" ng-model="myform.save" ng-disabled="myform.$invalid"
class="btn btn-primary" ng-click="edit(myform)">EDIT</button>
</div>
</div>
</div>
</div>
<!-- Content End -->
</form>
</div>
Somebody please help me how to do the validation. one more thing if i open the modal window normally the validation is working but i have the issue when i edit the row. I think this is a scope issue and the child scope is not getting bind. Your help is very much appreciable.
You don't need to include the form name in the name of the input, it's within a form so the input is bound to that form already. I'd also recommend binding your ng-model to another object on your scope (below I've used model) rather then the form itself.
You would write it like this.
<div class="row">
<div class="form-group required"
ng-class="{ 'has-error' : myform.name.$invalid && !myform.name.$pristine }">
<label for="name" class="control-label"> Name </label>
<div>
<input type="text" name="name" class="form-control input-sm"
ng-model="model.name" placeholder="Name"
required />
<p ng-show="myform.name.$invalid && !myform.name.$pristine" class="help-block"> Name is required.</p>
</div>
</div>
</div>
Also I'd change the ng-submit to the following
<form class="form-horizontal" name="myform" ng-submit="myform.$valid && submitForm()" novalidate>
Finally, I am able to find the solution
in EditController add below code
$scope.form={};
and your form should have form.myform like this
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
<h3 align="center">Edit Row Details</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" name="form.myform"
ng-submit="submitForm(form.myform.$valid)" novalidate>
<!-- Content Start -->
<div class="container">
<div class="row">
<div class="form-group required"
ng-class="{ 'has-error' : form.myform.name.$invalid && !form.myform.name.$pristine }">
<label for="name" class="control-label"> Name </label>
<div>
<input type="text" name="myform.name"
class="form-control input-sm" ng-model="myform.name"
placeholder="Name" required />
<p ng-show="form.myform.name.$invalid && !form.myform.name.$pristine"
class="help-block">Name is required.</p>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div>
<button type="submit" ng-model="myform.save" ng-disabled="form.myform.$invalid" class="btn btn-primary"
ng-click="edit(myform)">EDIT</button>
</div>
</div>
</div>
</div>
<!-- Content End -->
</form>
</div>
I am posting this becoz it may be helpful someone..
I have the following code:
<div id="messageArea">
<div ng-messages="text1.$error">
<div ng-message="required">
Text1 is required ...
</div>
</div>
<div ng-messages="text2.$error">
<div ng-message="required">
Text2 is required ...
</div>
</div>
<div ng-messages="text3.$error">
<div ng-message="required">
Text3 is required ...
</div>
</div>
</div>
<div>Text1<input id="text1" ng-model="text1" name="text1" ng-required="true"></div>
<div>Text2<input id="text2" ng-model="text2" name="text2" ng-required="true"></div>
<div>Text3<input id="text3" ng-model="text3" name="text3" ng-required="true"></div>
I wanted to show one error message at a time. When the first error is solved then the next error message will show. Anyone has any idea how I can do this? Thanks.
Nice solution is use CSS and ng-class
var app = angular.module('app', ['ngMessages']);
.error-wrapper {
color: red;
}
.error-wrapper > .view {
display: block;
}
.error-wrapper > .view ~ .view{
display: none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-messages.min.js"></script>
</head>
<body ng-app="app">
<form ng-submit="createWallet()" name='testForm' novalidate>
<div>
<input ng-model='text1' type="text" name='text1' placeholder='text1' required>
</div>
<div>
<input ng-model='text2' type="text" name='text2' placeholder='text2' required>
</div>
<div>
<input ng-model='text3' type="text" name='text3' placeholder='text3' required>
</div>
<div class="error-wrapper">
<div ng-class="{ view: testForm.text1.$invalid }" class="error" ng-messages="testForm.text1.$error">
<div ng-message='required'>Text1 required</div>
</div>
<div ng-class="{ view: testForm.text2.$invalid }" class="error" ng-messages="testForm.text2.$error">
<div ng-message='required'>Text2 required</div>
</div>
<div ng-class="{ view: testForm.text3.$invalid }" class="error" ng-messages="testForm.text3.$error">
<div ng-message='required'>Text3 required</div>
</div>
</div>
<button>Submit</button>
</form>
</body>
</html>
It's show only the first error message with class .view, at the plunker http://plnkr.co/edit/kBSpRJLs6QA2D0jctKXB?p=preview
If you wrap the inputs in a form tag with an ID you can use ng-messages on the form to pick up errors from all the inputs. You can see this here: http://jsbin.com/tikufuvawe/2/edit.
<form name="userDetails">
<input name="userName" type="number" ng-model="number" required ng-maxlength="2" />
<textarea name="text" type="text" ng-model="text" required></textarea>
<div ng-messages="userDetails.$error">
<div ng-message="required">This is required</div>
</div>
</form>
EDIT:
I have updated my example http://jsbin.com/zadojamifo/3/edit using ng-show to hide other errors such that only one will show at a time. Its not a great solution but works for the situation described.
<div ng-messages="userDetails.number.$error">
<div ng-message="required">number is required</div>
</div>
<div ng-messages="userDetails.text.$error" ng-show="!userDetails.number.$error.required">
<div ng-message="required">text is required</div>
</div>
<div ng-messages="userDetails.other.$error" ng-show="!userDetails.number.$error.required && !userDetails.text.$error.required">
<div ng-message="required">other is required</div>
</div>
As you can see the ng-show will get bigger and bigger in size if more validation types are added and if more controls are added that require validation.
Maybe is too late but this is my solution, use ng-messages-multiple to show one or more message, angular respect the order of validation messages:
<form name="loginForm" ng-submit="login()">
<label>Email</label>
<input required name="email" type="email" ng-model="email">
<div ng-messages="loginForm.email.$error" ng-show="loginForm.email.$dirty && loginForm.email.$invalid" ng-messages-multiple>
<div ng-message="required">El email es requerido!</div>
<div ng-message="email">El email debe cumplir con el formato: email#dominio.com!</div>
</div>
<label>Contraseña</label>
<input required name="password" type="password" ng-model="password" ng-pattern="passwordPattern" md-maxlength="12">
<div ng-messages="loginForm.password.$error" ng-show="loginForm.password.$dirty && loginForm.password.$invalid">
<div ng-message="required">La contraseña es requerida!</div>
<div ng-message="pattern">Se requieren de 6 a 12 caracteres, por lo menus un dígito, una letra mayuscula y una minúscula</div>
</div>
<div layout="row" layout-align="center center">
<button ng-disabled="loginForm.$invalid>Login</button>
</div>
</form>
You can do something like this
<div id="messageArea">
<div ng-messages="number.$error">
<div ng-message="required">
Number is required ...
</div>
</div>
<div ng-messages="text.$error" ng-if="!number.$error">
<div ng-message="required">
Text is required ...
</div>
</div>
In this case you show the second block of messages only if the first one does not exists (and it's hidden if number.$errors exists)
This sample (http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html) uses a follow solution:
<div ng-messages="my_form.first_name.$error"
ng-if="interacted(my_form.first_name)">
$scope.submitted = false;
$scope.submit = function() {
$scope.submitted = true;
};
$scope.interacted = function(field) {
return $scope.submitted || field.$dirty;
};
If you don't want to show on page load but either on page submit or on change of value then use
<form name="frmSome">
<div ng-messages="userDetails.$error"
ng-if='frmSome.userName.$dirty || frmSome.$submitted'>
<span ng-message="required">Name is Required</span>
<span ng-message="maxlength">Max. 100</span>
</div>
<input name="userName" type="text"
ng-model="model.name"
ng-required='true'
ng-maxlength="30" />
..............................
..............................
<input type='submit' value='Submit' />
</form>
If you touch the text box it will be "dirty"
if try to submit the page "Submitted"
It works on the name not the model
I've created a basic angular form and can't determine why it's not submitting.
http://contact-info.checkoutbiblebowl.com/
The form validation is valid and it still won't submit. I feel like I've overlooked something silly, but have looked at this over the last few days and can't figure out what it is. Any suggestions?
<form method='post' action='' name='form' novalidate ng-controller="myController">
<div class="row form">
<div class="form-inline">
<div class="form-row">
<label class="form-label" style='margin-top: 20px'>Name</label>
<div class="form-item">
<div style="float: left">
First<br/>
<input type="text" ng-model="firstName" name="firstName" class="small" style="width: 200px" maxlength="32" required>
<div ng-cloak ng-show="form.firstName.$error.required" class="required">First name is required</div>
</div>
<div style="float: left; margin-left: 1em">
Last<br/>
<input type="text" ng-model="lastName" name="lastName" class="small" style="width: 200px" maxlength="32" required>
<div ng-cloak ng-show="form.lastName.$error.required" class="required">Last name is required</div>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="button-row">
<button ng-disabled="!form.$valid" type="submit" class="btn" ng-click="debug()">Submit</button>
</div>
</div>
</div>
</form>
My Controller:
<script type="text/javascript">
angular.module('contact', []).
controller('myController', function ($scope) {
$scope.debug = function () {
console.log($scope.form);
}
});
</script>
I think you just need to specify the action explicitly, not with an empty string otherwise angular will prevent the submission.
http://docs.angularjs.org/api/ng.directive:form
like so:
http://plnkr.co/edit/WtP03BFVyEsnOqf3n8a4?p=preview