I'm having a bit of trouble getting the form to run it's validation function. I have a plnkr. I Know I'm close... The validation file is loading in without errors. It's just not running the validation part. I built it off of this. What am I missing? Thanks in advance for the help.
my Form:
<form id="phone" class="content-pad span6" novalidate>
<div class="control-group" ng-class="{error:!input-form-Phone.phonenumber.$valid}">
<label for="phonenumber">Enter Area Code and Telephone Number</label>
<div class="form-group controls">
<input type="text" class="form-control" id="inputphonenumber" name="phonenumber" ng-model="phonenumber"
placeholder="Ex: 4155551234" valid-phonenumber/>
<div class="help-inline">
<span ng-show="!!phone.phonenumber.$error.isBlank">Phone Number Required.</span>
<span ng-show="!!phone.phonenumber.$error.invalidChars">Must Contain Number Only</span>
<span ng-show="!!phone.phonenumber.$error.invalidLen">Phone Number Must Contain area Code and Phone Number.</span>
</div>
</div>
</div>
<div class="form-actions" ng-show="formAllGood()">
<div class="span6">
<a ng-href="SA_report_results.html" class="btn btn-primary " type="button">Run Report</a>
</div>
</div>
<div class="span3" >
<input type="button" value="Reset" ng-click="reloadPage()" class="btn btn-danger "/>
</div>
</form>
app,js
var app = angular.module('myApp', ['myApp.formValidation','ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.formAllGood = function(){
return ($scope.phonenumberGood);
};
});
validation,js
angular.module('myApp.formValidation', [])
.directive('validPhoneNumber', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue) {
// Any way to read the results of a "required" angular validator here?
var isBlank = viewValue === '';
var invalidChars = !isBlank && !/^[A-z]+$/.test(viewValue);
var invalidLen = !isBlank && !invalidChars && (viewValue.length < 5 || viewValue.length > 20);
ctrl.$setValidity('isBlank', !isBlank);
ctrl.$setValidity('invalidChars', !invalidChars);
ctrl.$setValidity('invalidLen', !invalidLen);
scope.phonenumberGood = !isBlank && !invalidChars && !invalidLen;
});
}
};
});
You are calling valid-phonenumber which doesn't exist. It is valid-phone-number. This will make your plunker run.
By the way your invalidChars check is wrong.
Related
I have a small password form that returns different messages depending on what has been entered, if nothing has been entered the message should just be "please enter a password" if the password entered is like the username then the only error message back should be "Your password can not be like your username". And finally when the pattern doesnt match the user should get a message about the pattern. When I enter nothing and click submit I am getting both the distinct and required messages back, how can I fix this to only show the required message until data has been entered that matches the username?
HTML:
<div ng-controller="NewPasswordCtrl" ng-init="init()">
<form name="npForm" class="col-md-12" role="form" style="padding-top:15px" ng-submit="SubmitPasswordReset(npForm, NewPasswordModel)" novalidate>
<div class="form-group">
<div class="input-group">
<input id="newPassword" name="newPassword" type="password" placeholder="Password" class="form-control" ng-model="NewPasswordModel.Password" ng-model-options="{ allowInvalid: true}" override-password user="{{NewPasswordModel.Username}}" ng-style="npForm.newPassword.$error.pattern && {'border':'1px solid red'}"
required>
<small id="newPasswordHelpBlock0" class="form-text text-danger" ng-if="npForm.newPassword.$error.required && npForm.$submitted">
Please enter a password.
</small>
<small id="newPasswordHelpBlock1" class="form-text text-danger" ng-if="npForm.newPassword.$error.pattern && npForm.$submitted">
Password is not valid. Password must be at least 8 characters, upper and lower case text, contain at least one number and contain at least one special character.
</small>
<small id="newPasswordHelpBlock2" class="form-text text-danger" ng-if="npForm.newPassword.$error.distinct && npForm.$submitted">
Your password can not be like your username.
</small>
</div>
</div>
<div class="form-group">
<div class="ml-5">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<hr /> model = {{NewPasswordModel}}
</form>
</div>
AngularJS
var app = angular.module('app', []);
app.controller('NewPasswordCtrl', ['$scope', function($scope) {
$scope.NewPasswordModel = {};
$scope.NewPasswordModel.Password = "";
$scope.init = function() {
$scope.NewPasswordModel.Username = 'Tester'
};
$scope.SubmitPasswordReset = function (form, model) {
if (form.$valid) {};
};
}]);
app.directive('overridePassword', function() {
var PASSWORD_REGEXP = /(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&].{7,}/;
return {
require: 'ngModel',
link: function(scope, elem, attrs, ctrl) {
var usr = attrs.user;
//For DOM -> model validation
ctrl.$parsers.unshift(function(modelValue) {
var valid = modelValue.includes(usr);
ctrl.$setValidity('distinct', valid);
return valid ? modelValue : undefined;
});
//For model -> DOM validation
ctrl.$formatters.unshift(function(modelValue) {
ctrl.$setValidity('distinct', modelValue.includes(usr));
return modelValue;
});
}
};
});
https://jsfiddle.net/devnsyde/q8v1b4Lj/
You can add another && condition to your ngIf directive that checks the length of your password input.
ng-if="npForm.newPassword.$error.distinct && npForm.$submitted && NewPasswordModel.Password.length > 0"
Demo
This is a typical example of the use of ng-messages in AngularJS (1.x):
<form name="demoForm">
<input name="amount" type="number" ng-model="amount" max="100" required>
<div ng-messages="demoForm.amount.$error">
<div ng-message="required">This field is required</div>
</div>
<button type="submit">test submit</button>
</form>
see: http://jsfiddle.net/11en8swy/3/
I now want to change this example so the "This field is required" error only shows when the field is touched ($touched) or the user hits the submit button.
I cannot use the ng-submitted class on the form since the validation error prevents the submitting of the form.
How should I do this?
Thanks
You can do this using ng-show:
<div ng-messages="demoForm.amount.$error" ng-show="demoForm.amount.$touched">
<div ng-message="required">This field is required</div>
</div>
And use a custom directive. See a working demo:
var app = angular.module('app', ['ngMessages']);
app.controller('mainCtrl', function($scope) {
});
app.directive('hasFocus', function($timeout) {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attr, ctrl) {
element.on('focus', function() {
$timeout(function() {
ctrl.hasFocusFoo = true;
})
});
element.on('blur', function() {
$timeout(function() {
ctrl.hasFocusFoo = false;
})
});
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.js"></script>
<body ng-app="app" ng-controller="mainCtrl">
<form name="demoForm">
<input name="amount" type="number" ng-model="amount" max="100" required has-focus>
<div ng-messages="demoForm.amount.$error" ng-show="demoForm.amount.$touched || demoForm.amount.hasFocusFoo">
<div ng-message="required">This field is required</div>
</div>
<button type="submit">test submit</button>
</form>
</body>
The directive is basically setting another hasFocusFoo field on the ngModel controller then we can easily use that directive.
Ah, at the PC at last.
https://plnkr.co/edit/EX3UmoAOKmTKlameBXRa?p=preview
<form name="mc.form">
<input type="text" name="empty" ng-model="mc.empty" required />
<label ng-show="mc.form.empty.$dirty && mc.form.empty.$error.required">i'm empty</label>
</form>
MainController.$inject = ['$timeout'];
function MainController($timeout) {
var vm = this;
$timeout(function(){
vm.form.$setPristine();
});
vm.submit = function(){
if(vm.form.$valid){
alert('yay');
}else{
(vm.form.$error.required || []).forEach(function(f){
f.$dirty = true;
});
}
}
}
Here is how I handle this task in my solution. form.$setPristine() - sets the field in a pristine state, so field isn't $dirty and error hidden. But after submit I manually state required fields in a $dirty state, so errors become visible. + if you type something, and delete it after, the error would be visible without submitting a form.
This plunk has a form with a field that only allows to enter aaa. Note that the error message is set in the controller, not in the html. When the user clicks on Submit they should see the message, but the message is not shown. What's wrong with this code?
HTML
<body ng-app="ngMessagesExample" ng-controller="ctl">
<form name="myForm" novalidate ng-submit="submitForm()">
<label>
This field is only valid when 'aaa' is
<input type="field1"
ng-model="data.field1"
name="field1"
required />
</label>
<div ng-messages="myForm.field1.$error" style="color:red">
<div ng-message-exp="required">{{errorMsg}}</div>
</div>
<br/><br/>
<button style="float:left" type="submit">Submit</button>
</form>
</body>
Javascript
var app = angular.module('ngMessagesExample', ['ngMessages']);
app.controller('ctl', function ($scope) {
$scope.submitForm = function() {
if ($scope.field1 != 'aaa')
$errorMsg = "This field should be 'aaa'";
else
$errorMsg = "";
};
});
Forget my previous answer.
Easiest and most robust is actually to make a new directive.
var app = angular.module('ngMessagesExample', ['ngMessages']);
app.directive("aaa", function() {
return {
restrict: "A",
require: "ngModel",
link: function(scope, element, attributes, ngModel) {
ngModel.$validators.aaa = function(modelValue) {
return modelValue === 'aaa';
}
}
};
});
And your controller:
app.controller('ctl', function ($scope) {
$scope.data = {
field1: ""
}
$scope.submitForm = function(){
//extra whatever code
}
});
Your HTML should be this:
<body ng-app="ngMessagesExample" ng-controller="ctl">
<form name="myForm" novalidate ng-submit="submitForm(myForm)">
<label>This field is only valid when 'aaa' is</label>
<input type="field1"
ng-model="data.field1"
name="field1"
required aaa/>
<div ng-messages="myForm.field1.$error" style="color:red">
<div ng-message="required">FIELD IS REQUIRED!!</div>
<div ng-message="aaa">FIELD MUST BE 'aaa'</div>
</div>
<button style="float:left" type="submit">Submit</button>
</form>
</body>
I would like to know if it is possible to send the user some kind of error message when the email already exist.
I have some directive like this. :
(function() {
angular
.module('app')
.directive('emailNotUsed',emailNotUsed);
emailNotUsed.$inject = ['$http', '$q'];
function emailNotUsed ($http, $q) {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$asyncValidators.emailNotUsed = function(modelValue, viewValue) {
return $http.post('/email',viewValue).then(function(response) {
console.log(response);
return response.data == true ? /*$q.reject(response.data.errorMessage)*/ console.log("Show Error Message"): true;
// console.log(response);
});
};
}
};
}
}());
As you can see this returns Show error in the console. But is it possible to pass this value to the register controller ? And set the value to true or false ?
(function () {
'use strict';
angular
.module('app')
.controller('RegisterController', RegisterController);
RegisterController.$inject = ['UserService', '$http','$q' ];
function RegisterController(UserService, $http,$q) {
var vm = this;
vm.register = register;
function register() {
vm.dataLoading = true;
UserService.Create(vm.user)
}
}
})();
Or could i give an error messages directly into the html.
<div class="container" ng-controller="RegisterController as vm">
<div class="col-md-6 col-md-offset-3">
<div ng-show="vm.error" class="alert alert-danger">{{vm.error}}</div>
<form name="form" ng-submit="!form.$pending && form.$valid && vm.register()" role="form">
<div>
<label for="email">Email</label>
<input type="text" name="email" id="email" class="form-control" ng-model="vm.user.email" email-not-used ng-model-options="{ debounce: 500 }" required >
</div>
<div class="form-actions">
<button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Register</button>
Cancel
</div>
</form>
</div>
</div>
My solution
After alot of struggling today i found a solution for my problem.
I modified the emailNotUsed directive to emailValidator.
(function() {
angular
.module('app')
.directive('emailValidator',emailValidator);
emailValidator.$inject = ['$q', '$timeout','$http'];
function emailValidator ($q, $timeout,$http){
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$asyncValidators.email = function(modelValue, viewValue) {
var deferred = $q.defer();
DoesEmailExist()
function DoesEmailExist () {
$http.post('/email',viewValue).then(function(response) {
if (response.data==true) {
console.log('Email does exist')
deferred.reject();
}else {
deferred.resolve();
}
});
};
console.log(deferred.promise)
return deferred.promise;
};
}
}
}
}());
And in registration.html i added this :
<div class="form-group" ng-class="{ 'has-error': form.email.$dirty && form.email.$invalid }">
<label for="email"> Email</label>
<input type="text" ng-model="signup.email" ng-model-options="{ debounce: 500 }" name="email" id="email" class="form-control" required email-validator>
<div class="help-block" ng-messages="form.email.$error" ng-if="form.email.$dirty">
<p ng-message="required">Your name is required.</p>
<div ng-message="email" class="help-block" >email already in use</div>
</div>
Yes you can directly show error message into the HTML.
try this,
In HTML,
<form name="form" ng-submit="!form.$pending && form.$valid && vm.register()" role="form">
<div>
<label for="email">Email</label>
<input type="text" name="email" id="email" class="form-control" ng-model="vm.user.email" email-not-used ng-model-options="{ debounce: 500 }" required >
<span ng-show="form.email.$invalid && form.email.$dirty">Email is already in use!</span>
<span ng-show="form.email.$valid && form.email.$dirty">Email available!</span>
</div>
<div class="form-actions">
<button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Register</button>
Cancel
</div>
</form>
In app.js,
var app = angular.module('app', []);
app.directive('emailNotUsed',emailNotUsed);
emailNotUsed.$inject = ['$http', '$q'];
function emailNotUsed ($http, $q) {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$asyncValidators.emailNotUsed = function(modelValue, viewValue) {
var data='';
if (viewValue=='abc#xyz.com'){
ngModel.$setValidity('valid', false);
scope.form.email.$setValidity('email', false);
}else{
ngModel.$setValidity('valid', true);
scope.form.email.$setValidity('email', true);
}
return data;
}
}
}
}
app.controller('RegisterController', RegisterController);
RegisterController.$inject = ['$scope', '$http','$q' ];
function RegisterController($scope, $http,$q) {
var vm = this;
$scope.name = 'abc#xyz.com email is already in use ';
vm.register = register;
function register() {
vm.dataLoading = true;
UserService.Create(vm.user)
}
}
Hope this helps. .
You can setup error message directly in your view. Bind to $scope.form.email.emailNotUsed.
<div>
<label for="email">Email</label>
<input type="text" name="email" id="email" class="form-control" ng-model="vm.user.email" email-not-used ng-model-options="{ debounce: 500 }" required >
<span ng-show="form.email.emailNotUsed">Email is already in use!</span>
</div>
I am trying to validate a number according to its min and max value through angularJS
this is the custom directive, I first tried with max that provide angularJs for input number validation it works with static number not with binding data. That's why i thought about custom directive
.directive('ngMax', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elem, attr, ctrl) {
scope.$watch(attr.ngMax, function(){
if (ctrl.$isDirty) ctrl.$setViewValue(ctrl.$viewValue);
});
var maxValidator = function(value) {
var max = scope.$eval(attr.ngMax) || Infinity;
if (!isEmpty(value) && value > max) {
ctrl.$setValidity('ngMax', false);
return undefined;
} else {
ctrl.$setValidity('ngMax', true);
return value;
}
};
ctrl.$parsers.push(maxValidator);
ctrl.$formatters.push(maxValidator);
}
};
});
and in the view :
<div class="modal-body" >
title: {{book.title}}<br>
price: {{book.price}}<br>
quantity: {{book.nbr_exemplaires}}
<form name= "myForm" ng-submit= "addToCart(book, quantity, <%= current_user.id %>)" novalidate >
<input type="number" min="1" ng-max="{{book.nbr_exemplaires}}" name= "quantite" ng-model="quantity" required >
<span style="color:red" ng-show="myForm.quantite.$error.required">
<span ng-show="myForm.quantite.$error.required">quantity is required!</span>
</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-primary" ng-disabled="myForm.$invalid ">Save changes</button>
</div>
</form>
I could not understand where is the problem
To avoid X/Y questions, when you try something and it doesn't work, try to address that first. That's good that you provided a broader context, so specifically to your question, built-in max provides everything that you need:
<input type="number" max="{{max}}" ng-model="foo">
and you can set max dynamically, for example:
$scope.max = 10;