Here's FIDDLE
Not able to understand that why the required validation is not working ??
HTML
<div ng-app="app">
<div ng-controller="myctrl">
<form name="myform" class="form form-horizontal" novalidate>
<fieldset class="fieldset" ng-show="payment == 'bankAccount'" class="form-group clearfix">
<ul class="form-group">
<li ng-class="{
'has-error': myform.routingNumber.$invalid,
'has-success':myform.routingNumber.$valid}">
<label for="routingNumber">Bank Routing Number</label>
<div class="" ng-show="myform.routingNumber.$error.required"> <span class="help-block">Please enter routing number</span>
</div>
<input type="text" name="routingNumber" class="form-control" required/>
</li>
</ul>
</fieldset>
</form>
</div>
</div>
JS
var app = angular.module('app', [])
You need to provide an ng-model for the angular validation on the form to kick in.
Try:-
<input type="text" ng-model="routingNumber" name="routingNumber" class="form-control" required/>
On a side note:- there is no use of using label for without using id on the target input.
Demo
Related
I am trying to add user to database using bootstrap modalI am not getting any error but not able to fetch user data.
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-3 control-label" >First name</label>
<div class="col-sm-9">
<input type="text" class="form-control" ng-model="firstname">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Last name</label>
<div class="col-sm-9">
<input type="text" class="form-control" ng-model="lastname" >
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" ng-click="add()">Add</button>
</div>
</div>
</form>
</div>
my controller is:
$scope.add = function()
{
console.log(firstname); //here i want to display fn&ln and make http request to codeigniter api o/p in console is: firstname(not the username entered)
}
And i also want to update it in database using codeigniter api call, can anyone plz help me through this?
You should use $scope.firstname you need to have $scope for accessing scope variables
Don't forget to add ng-app and ng-controller to your template HTML
I have few controls on Angular Js form and submit button. I am also validating if the fields are empty or not. However, even when all data are entered, the form is not getting submitted. Below is the sample code which I have:
Index.cshtml
<body class="ng-cloak">
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div class="container" ng-show="createMenu">
<div class="row">
<div class="col-sm-2">
<label>Name :</label>
</div>
<div class="col-md-6 form-group">
<input type="text" maxlength="150" class="input-md form-control col-md-4" required="" ng-model="testName" name="testName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.testName.$error.required">Name is required</span>
//other controls
<input type="submit" value="Submit" ng-click="submitted=true" />
Is there any identifier or way to check which control has invalid data?
Thanks
For debugging purposes you can just print out the $error property of the form controller:
<pre ng-bind="mainForm.$error | json"></pre>
This will immediately show you which model isn't valid.
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
I have an ng-repeat to iterate over form fields.
The problem is, if I have an invalid form I don't get any feedback. I don't see the span, nor do I see has-error get applied to the div.
I must be missing something simple, can anyone see what it is?
Here's the ng-repeat code:
<div ng-repeat="i in items">
<ng-form novalidate class="user-form" name="userForm">
<div class="form-group has-feedback" ng-class="{'has-error':userForm.userInput.$invalid}">
<label class="control-label">{[{ i.item }]}</label>
<input-field item="i"></input-field>
<span ng-show="userForm.userInput.$invalid">TEST</span>
</div>
</ng-form>
</div>
Which generates an entry like this:
<div ng-repeat="i in items">
<ng-form novalidate="" class="user-form" name="userForm">
<div class="form-group has-feedback" ng-class="{'has-error':userForm.userInput.$invalid}">
<label class="control-label">Username</label>
<input name="userInput" class="form-control" type="text" ng-model="item.answer" placeholder="Username" required>
<span ng-show="userForm.userInput.$invalid" class="ng-hide">TEST</span>
</div>
</ng-form>
</div>
You want create more than one "userForm"?
If not you can change it to
<ng-form novalidate class="user-form" name="userForm"> <div ng-repeat="i in items">
<div class="form-group has-feedback" ng-class="{'has-error':userForm.userInput.$invalid}">
<label class="control-label">{[{ i.item }]}</label>
<input-field item="i"></input-field>
<span ng-show="userForm.userInput.$invalid">TEST</span>
</div> </div>
</ng-form>
Hope it helps.
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