I am new to form validation using Angular JS so I looked around a lot and found one that was a nice tutorial. The tutorial can be found here. I know there are a few posts on Stack Overflow about ng-messages however I reviewed them and they do not seem to pertain to my issue.
I have installed ng-messages using bower and am running it with grunt. There are no error however my validation messages do not seem to fire off.
My HTML is as follows:
<form name="myForm" novalidate>
<fieldset>
<div id="number" ng-class="{ 'has-error' : myForm.clientNumber.$invalid && !myForm.clientNumber.$pristine }">
<label for="client">SRF #: *</label>
<input type="text" name="clientNumber" placeholder="Enter SR #" ng-minlength="3" ng-maxlength="9" required>
<div ng-messages="myForm.clientNumber.$error">
<!--<div ng-message="required" >SRF # is required.</div>-->
<div ng-message="minlength" >SRF Number is too short.</div>
<!--<div ng-message="maxlength">SRF Number is too long.</div>-->
</div>
</div>
</fieldset>
</form>
Part of my app.JS is as follows:
angular
.module('myApp', [
// Angular
'ngAnimate',
'ngCookies',
'ngResource',
'ngSanitize',
'ngTouch',
'ui.router',
'myApp.home',
'restangular',
'ngMessages'
])
Part of my controller is as follows:
(function() {
'use strict';
angular.module('myApp.home', [
'ui.router',
'myApp.myFactory',
'ngMessages'
])
.config(homeConfig)
.controller('homeCtrl', home);
homeConfig.$inject = ['$stateProvider'];
home.$inject = ['$http','myFactory','$timeout'];
function home($http,myFactory,$timeout) {
...
}
What I have looked at and tried:
ngMessages/angular validation not working
ng-messages is not working
https://github.com/angular/material/issues/6440
https://github.com/angular/material/issues/2820
https://docs.angularjs.org/api/ngMessages
http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html
Some in the list are tutorials while others are posts on Stack Overflow: ngMessages/angular validation not working.
I do not understand why it does not work. All sites I have seen look to be implementing the same way.
All we need to do is adding ng-model to our input.
The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
In short, without ng-model on <input> element Angular does not care about it.
Look at working snippet below.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-messages.js"></script>
<script>
var app = angular.module('app', ['ngMessages']);
app.controller('RegistrationScreenController', function() {});
</script>
</head>
<body ng-app="app" ng-controller="RegistrationScreenController">
<form name="myForm" novalidate>
<fieldset>
<div id="number" ng-class="{ 'has-error' : myForm.clientNumber.$invalid && !myForm.clientNumber.$pristine }">
<label for="client">SRF #: *</label>
<input type="text" ng-model="clientNumber" name="clientNumber" placeholder="Enter SR #" ng-minlength="3" ng-maxlength="9" required>
<div ng-messages="myForm.clientNumber.$error">
<div ng-message="required" >SRF # is required.</div>
<div ng-message="minlength" >SRF Number is too short.</div>
<div ng-message="maxlength">SRF Number is too long.</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>
# From what i can see, you are missing 'when=required' in your 'ng-message'
# This should fix it. Refer to examples below.
# 1) Using 'ng-messages'
# 2) Using 'ng-show'
//---------------------------------------------------------------------------------------------------------------
# HTML - Angular Material Design
# Follow the following example below and it should work.
# Am basically using 'ng-message' to show the error message
<form name="editUserForm">
<div flex layout="row">
<md-input-container flex="100">
<label for="firstName">First Name</label>
<md-icon md-font-icon="zmdi zmdi-account" style="color:#47B2E8"></md-icon>
<input id="firstNameEditUser"
label="firstName"
name="firstName"
type="text"
ng-model="vm.contact.firstName"
required/>
<div ng-messages="editUserForm.firstName.$error">
<div ng-message when="required"><span translate>Please enter your First Name</span></div>
</div>
</md-input-container>
</div>
</form>
//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------
# HTML - Angular Material Design
# Follow the following example below and it should work.
# Am basically using 'ng-show' to hide and show the error
# messages
<form name="changePasswordForm">
<md-input-container class="md-block">
<label for="password">Password</label>
<input id="password"
label="password"
name="password"
type="password"
ng-model="vm.user.password"
required/>
<div class="validation-messages-error">
<div ng-show="changePasswordForm.password.$dirty && changePasswordForm.password.$error.minlength">
<span>Password is too short</span>
</div>
<div ng-show="changePasswordForm.password.$dirty && changePasswordForm.password.$error.maxlength">
<span>Password is too long</span>
</div>
<div ng-show="changePasswordForm.password.$error.required">
<span>Password required</span>
</div>
</div>
</md-input-container>
</form>
//---------------------------------------------------------------------------------------------------------------
# CSS Class
.validation-messages-error {
font-size: 12px;
color: #dd2c00;
margin: 10px 0 0 25px;
}
//---------------------------------------------------------------------------------------------------------------
Related
I'm working with an input field with type="number" and I specifically want to use ng-min="0". I'm unsure what I'm doing wrong, but I don't see any message when I enter a value below zero into my field with my current implementation.
I did make sure to include angular messages like so: angular.module('myApp', ['ngMessages']).
My code:
<admin-form name="formName">
<admin-field>
<input
name="formName"
ng-model="$ctrl.model.whatever"
type="number"
min="0" />
<div ng-messages="userForm.formName.$error" style="color: maroon" role="alert">
<ng-message when="min">Value cannot be below 0</ng-message>
</div>
A working plunkr is available here: https://plnkr.co/edit/PUT7r1hNbJrjHDF0vhJd
The PLNKR used obsolete libraries. With updated libraries, it works:
angular.module('myapp', ['ngMessages'])
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-messages/angular-messages.js"></script>
<body ng-app="myapp">
<form name="myForm">
<label>Enter your number:</label><br>
<input type="number" name="myNumber" ng-model="num"
ng-min="0" role="alert">
<div ng-messages="myForm.myNumber.$error" style="color:red">
<div ng-message="min">Your field value is lesser minimum value</div>
</div>
</form>
</body>
i have to validate the text box which shows the error message when user enters 4 digit as 9999.so i have used the ng-pattern method to show error message but ng-pattern does n't allow to update the object.my code is given below:
<md-input-container class="" style="margin:5px 0px; margin-right:15px;">
<input type="password" name="numCode" ng-model="datas.part[1].Value" ng-value="datas.part[1].Value" maxlength="4" ng-pattern="/(?!9{4})\d{4}/" ng-keydown="vm.testCode(datas.part[1].Value)" class="ng-pristine ng-valid md-input ng-touched" aria-invalid="false" style="" autocomplete="off" required>
<div ng-messages="vm.formName.numCode.$error" class="allign-padding-bottom" role="alert">
<div ng-message-exp="['minlength','maxlength','pattern']">
{{::'testcode'|translate}}
</div>
</div>
</md-input-container>
vm.testCode= function (val) {
console.info("sdf",val);
vm.showConfirmUserCode = true;
///vm.isDeviceEnabled = false;
}
In ng-keydown method the model did n't update.it shows undefined in vm.formName.numCode.$viewvalue.kindly help me to sort out this problem & check my ng-pattern.if i remove my ng-pattern means i have the updated model
Please check this plunker:
http://plnkr.co/edit/g0wsbFnfi6TEW76orxIJ?p=preview
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<form name="form1" novalidate>
<input type="password" name="numCode" ng-model="inputText" ng-value="inputText" ng-pattern="/(?!9{4})\d{4}/" ng-maxlength="4" ng-keydown="testCode(inputText)" aria-invalid="false" style="" autocomplete="off" required>
<div ng-messages="form1.numCode.$error" role="alert">
<div ng-message="pattern">pattern error</div>
<div ng-message="maxlength">maxlength error</div>
<div ng-message="required">required error</div>
</div>
</form>
</body>
Have you referenced angular-messages as a seperate library? The ng-keydown works if its a valid text and the error messages are shown correctly.
I was hoping someone could tell me what I was doing wrong with the ngMessages directive. The code I am using is:
<script type="text/ng-template" id="error-messages">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">This field is too short</div>
</script>
<div ng-controller="SomeController">
<div class="row">
<div class="col-md-6">
<form name="profileForm" ng-submit="model.submit()" novalidate>
<div>
<label for="username">Your user name:</label>
<input type="text" id="username" name="username" required placeholder="User name" ng-model="model.user.username">
<div class="help-block" ng-messages="profileForm.username.$error">
<div ng-messages-include="error-messages"></div>
</div>
</div>
<button>submit</button>
</form>
</div>
</div>
</div>
And I created a plunk here ng-messages-include plunk
Been at this for hours.
Thanks
ngMessages does not ship with angular by default. So, when you add ng-messages directive, angular doesn't compile it and nothing happens.
What you should do is add ng-messages to a script tag and add the module ngMessages in your app definition.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-messages.min.js"></script>
var anApp = angular.module('anApp', ['ngMessages']);
See the updated plunker: http://plnkr.co/edit/1CtamfeVCpggDApH9Enp?p=preview
I need am not able to access the $scope.mainform.subform.submitted property in my script. My html goes as below.
<div ng-form="mainform">
<div ng-repeat="dependent in DependentDetails">
<ng-form name="subform">
<input type="text" class="textbox" ng-model="dependent.FirstName"/>
#*Same goes for other personal details*#
<input type="button" id="submitbutton" value="Save" ng-model="Submit" ng-click="saveDependentDetailsClick($event, $index, dependent)" />
</ng-form>
</div>
</div>
Can anyone help?
First of all, I think that it's not correct to use <ng-form name="subform">...</div> in ng-repeat in a way you have used it because you will end up with multiple forms having same name(subform) within the same scope therefore you can't refer to each of these forms as they have not unique name providing you with reference to them.
You will also end up with multiple submit buttons with the same id="submitbutton" in same html document which is an invalid html.
try this.
var app = angular
.module('MyApp', [
])
.controller('Main', ['$scope', function ($scope) {
$scope.DependentDetails = [{"FirstName":""},{"FirstName":""}];
$scope.saveDependentDetailsClick = function(DependentDetails){
console.log(DependentDetails);
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="main-content" ng-app="MyApp" ng-controller="Main as myCtrl">
<div ng-form="mainform">
<div ng-repeat="dependent in DependentDetails">
<ng-form name="subform">
<input type="text" class="textbox" ng-model="dependent.FirstName"/>
<input type="button" value="Save" ng-click="saveDependentDetailsClick(dependent)" />
</ng-form>
</div>
</div>
</div>
I came across this plunk while searching for email validation in angular js ... http://plnkr.co/edit/L0mbRw?p=preview . Now the email validation used here works the way I want it but when I copied the code and created a new plunk here ... http://plnkr.co/edit/hbo0GcRx9F7t2CkjBS3n?p=preview the validation stops working. I check everything was same but it isn't working the same way.
Its working Fine, even when i create a JSFiddle with that also its working fine,
Take a look at this
Working Demo
html
<body ng-app='validationApp' ng-controller='mainController'>
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate="">
<div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.email" />
<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
script
var validationApp = angular.module('validationApp', []);
validationApp.controller('mainController', function($scope) {
});