I am working on Angularjs form validation for multiple input values.
Below is the issue I am facing
Let's say I entered 'Johnss', directive will validate and give error Invalid name
click on plus(+) button adjacent to Name label to add new Name input.
Enter Peter. Now you will see "Invalid name" for both Peter and Johnss.
Click on cancel button next to Peter.
Now in place of 'Johnss' try to enter any value and no validation is being done. Whatever value you enter it is accepting and no validation is happening.
Same is the case with 'Place' label.
What is the better way of doing this validation on each of the element?. Can someone please help me on this.
Also I am looking for a way to disable + button when validation fails.
Below is the code I have written
JS
var app = angular.module('multipleInputs',[]);
app.controller('multipleInputsCtrl',function($scope) {
$scope.users = [
{}
];
$scope.places = [{}];
$scope.addUser = function() {
var newUser = {};
$scope.users.push(newUser);
}
$scope.removeUser = function(user) {
var index = $scope.users.indexOf(user);
$scope.users.splice(index,1);
}
$scope.addPlace = function() {
var newPlace = {};
$scope.places.push(newPlace);
}
$scope.removePlace = function(place) {
var index = $scope.places.indexOf(place);
$scope.places.splice(index,1);
}
});
app.directive('nameValidation', function() {
var acceptableNames = ['John', 'Sachin', 'Sam', 'Sudhir', 'Nalanda'];
return {
require: 'ngModel',
link: function(scope, element, attr, mCtrl) {
mCtrl.$validators.name = function validationError(value) {
if (value && acceptableNames.includes(value)) {
return true;
} else if (value && !acceptableNames.includes(value)) {
return false;
} else {
return true;
}
}
}
};
})
app.directive('placeValidation', function() {
var acceptableNames = ['Chicago', 'Houston', 'Dallas', 'Seattle', 'Mumbai'];
return {
require: 'ngModel',
link: function(scope, element, attr, mCtrl) {
mCtrl.$validators.place = function validationError(value) {
if (value && acceptableNames.includes(value)) {
return true;
} else if (value && !acceptableNames.includes(value)) {
return false;
} else {
return true;
}
}
}
};
})
HTML
<!doctype html>
<html>
<head>
<title>Generate Multiple Input Fields Dynamically</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script src="multipleInputs.js"></script>
</head>
<body ng-app="multipleInputs" class="users-container" ng-controller="multipleInputsCtrl">
<form name="myForm">
<div>
<div class="form-group">
<label for="inputName" style="color:darkblue">Name <button type="button" class="btn btn-sm" ng-click="addUser()">+</button></label>
<section ng-repeat="user in users">
<input class="users-container-inputs-text" type="text" placeholder="First Name" ng-model="user.name" name="personName" name-validation>
<span class="users-container-inputs-button" ng-click="removeUser(user)">X
</span>
<span class="alert-danger" ng-show="myForm.personName.$error.name"> Invalid name</span>
</input>
</section>
</div>
<div class="form-group">
<label for="inputPlace" style="color:darkblue">Place <button type="button" class="btn btn-sm" ng-click="addPlace()">+</button></label>
<section ng-repeat="place in places">
<input class="users-container-inputs-text" type="text" placeholder="Place" ng-model="place.name" name="placeName" place-validation>
<span class="users-container-inputs-button" ng-click="removePlace(place)">X
</span>
<span class="alert-danger" ng-show="myForm.placeName.$error.place"> Invalid place</span>
</input>
</section>
</div>
</div>
</form>
</body>
</html>
Codepen link:
https://codepen.io/sudhir_rocks/pen/ZEpKVrR
You can use ng-disabled Directive in AngularJS to disable HTML elements.
https://docs.angularjs.org/api/ng/directive/ngDisabled
If the expression inside the ng-disabled attribute returns true then the form field will be disabled.
Related
I have multiple input fields and I want to validate my fields. They can't b blank when user click on submit button. How I will show border red when user click on button if fields are empty.
here is my code
http://plnkr.co/edit/XtnSdO9ARpHdn9RZotMt?p=info
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.c = [
{
name:'abc'
},
{
name:'pqr'
}
];
$scope.onclick =function(){
console.log($scope.c)
}
});
First of all, you need to put all input fields inside form tag. Like this:
<form ng-submit="onclick()">
<button type="submit">submit</button>
<li ng-repeat="x in c">
<input type="text" ng-model='x.name' value="{{x.name=='abc'?'ddd':'hhh'}}" required="true"/>
</li>
</form>
For input's you need to set property required="true" (or angular's ng-required, if you need conditional values). Sumbit button need to have type="submit" (so he triggers form submission). Submit function needs to be moved from button on-click to form's property ng-submit="onclick()".
This example will already work with native html5 validation messages.
If you want to add custom styles, input's which are not valid will have css class ('ng-invalid') on them.
It is best to use required attribute on your fields. But you can do manual validation with a directive. You just need to wrap your inputs in a <form>. This directive can be extended to do any validation you want. Here is an example of one:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'World';
$scope.c = [{
name: 'abc'
}, {
name: 'pqr'
}];
$scope.onclick = function() {
console.log($scope.c)
}
});
app.directive("emptyValidator", function($q, $timeout) {
return {
restrict: "A",
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.$validators.empty = function(modelValue, viewValue) {
if (!ctrl.$isEmpty(modelValue)) {
return true;
}
return false;
}
}
};
});
.red-border {
border: 2px solid red;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="formName" ng-submit="onclick()">
<p>Hello {{name}}!</p>
<button type="submit">submit</button>
<ul>
<li ng-repeat="x in c">
<ng-form name="innerForm">
<input type="text" name="inputName" ng-model='x.name' empty-validator ng-class="{'red-border' : innerForm.inputName.$error.empty}" />
</ng-form>
</li>
</ul>
</form>
</div>
</body>
</html>
However, you asked for a weird request to validate it on a click of a button, so you might want to do it in the function itself. Which is not a proper way to validate it, but still can be done. Here is an example of that:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'World';
$scope.c = [{
name: 'abc'
}, {
name: 'pqr'
}];
$scope.d = [false, false];
$scope.onclick = function() {
var f = false;
for (var i = 0; i < $scope.c.length; i++) {
if (!$scope.c[i].name) {
$scope.d[i] = true;
f = true;
} else {
$scope.d[i] = false;
}
}
if (f) {
return false;
}
console.log($scope.c)
}
});
.red-border {
border: 2px solid red;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form ng-submit="onclick()">
<p>Hello {{name}}!</p>
<button type="submit">submit</button>
<ul>
<li ng-repeat="x in c">
<input type="text" ng-model='x.name' ng-class="{'red-border' : d[$index]}" />
</li>
</ul>
</form>
</div>
</body>
</html>
What I am trying to do is create a directive which compares two password inputs and triggers invalid if either changes. I have found a few examples and have tried a few and have combined a few in my own attempts. However, I have only been able to toggle the validity with $setValidity when the confirm password field changes. When you change the password field it doesn't trigger the invalidity of the comparison.
Here's my directive:
app.directive("passwordVerify", function() {
return {
require: "ngModel",
scope: {
passwordVerify: '=',
},
link: function(scope, element, attrs, ctrl) {
scope.$watch(function() {
var combined;
if (scope.passwordVerify || ctrl.$viewValue) {
combined = scope.passwordVerify + '_' + scope.$view;
}
return combined;
}, function(value) {
if (value) {
ctrl.$parsers.unshift(function(viewValue) {
var origin = scope.passwordVerify;
if (origin !== viewValue) {
ctrl.$setValidity("pwd", false);
return undefined;
} else {
ctrl.$setValidity("pwd", true);
return viewValue;
}
});
}
});
}
};
});
Here's the directive in action:
<input id="user_password" type="password" name='user_password' placeholder="password" value='' required ng-model="user.user_password">
<p class="help-text">Required</p>
<div class="help-block" ng-messages="add_user_form.user_password.$error" ng-show="add_user_form.user_password.$touched">
<div ng-messages-include="/app/views/messages.html" ></div>
<input id="confirm_password" ng-model="user.confirm_password" name="confirm_password" type="password" placeholder="confirm password" name="user_confirm_password" required password-verify="user.user_password">
<p class="help-text">Enter matching password</p>
<div class="help-block" ng-messages="add_user_form.confirm_password.$error" ng-show="add_user_form.confirm_password.$touched">
<div ng-messages-include="/app/views/messages.html" ></div>
With this code I can verify that the passwords match when I change the value of the confirm password field, however when you change the value of the password field it doesn't revalidate the input. I'm pretty sure there is a successful way to add $watch to two elements or to use $watchgroup to do this. I just can't figure it out. I know there are a lot of questions on this topic but all I've tried have only gotten me to this point.
I'm using Angular 1.5.7 btw...
Here's a version working bi-directionally:
(function() {
"use strict";
angular.module('app', ['ngMessages'])
.controller('mainCtrl', function($scope) {
})
.directive('passwordVerify', function() {
return {
restrict: 'A', // only activate on element attribute
require: '?ngModel', // get a hold of NgModelController
link: function(scope, elem, attrs, ngModel) {
if (!ngModel) return; // do nothing if no ng-model
// watch own value and re-validate on change
scope.$watch(attrs.ngModel, function() {
validate();
});
// observe the other value and re-validate on change
attrs.$observe('passwordVerify', function(val) {
validate();
});
var validate = function() {
// values
var val1 = ngModel.$viewValue;
var val2 = attrs.passwordVerify;
// set validity
ngModel.$setValidity('passwordVerify', !val1 || !val2 || val1 === val2);
};
}
}
})
})();
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.7/angular-messages.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<form name="add_user_form">
<div class="col-md-12">
<div class="form-group" ng-class="{ 'has-error' : add_user_form.user_password.$touched && add_user_form.user_password.$invalid }">
<p class="help-text">Enter password</p>
<input type="password" class="form-control" id="user_password" name="user_password" placeholder="password" required ng-model="user.user_password" password-verify="{{user.confirm_password}}">
<div class="help-block" ng-messages="add_user_form.user_password.$error" ng-show="add_user_form.user_password.$touched">
<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>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : add_user_form.confirm_password.$touched && add_user_form.confirm_password.$invalid }">
<p class="help-text">Enter matching password</p>
<input class="form-control" id="confirm_password" ng-model="user.confirm_password" name="confirm_password" type="password" placeholder="confirm password" required password-verify="{{user.user_password}}">
<div class="help-block" ng-messages="add_user_form.confirm_password.$error" ng-show="add_user_form.confirm_password.$touched">
<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="passwordVerify">No match!</p>
</div>
</div>
</div>
</form>
</body>
</html>
I hope it helps.
I am trying validate the textbox allow only integer number and greater than zero values.
Here I attached my code.
Html:
<body ng-app="myApp">
NUMBER ONLY <input type="text" allow-pattern="\d" />
</body>
Js:
var app = angular.module("myApp",[]);
app.directive('allowPattern', [allowPatternDirective]);
function allowPatternDirective() {
return {
restrict: "A",
compile: function(tElement, tAttrs) {
return function(scope, element, attrs) {
element.bind("keypress", function(event) {
var keyCode = event.which || event.keyCode; // I safely get the
if (!keyCodeChar.match(new RegExp(attrs.allowPattern, "i"))) {
event.preventDefault();
return false;
}
});
};
}
};
}
Also I tried like this bellow:
<body ng-app="myApp">
NUMBER ONLY <input type="text" allow-pattern="^[1-9][0-9]*$" />
</body>
But its not working.
Check jsfiddle link: click here
You can make use of angular form validation and also use ng-model-options
Here is the link to Codepen
Controller snippet :
var app = angular.module('app',[]);
app.controller('myCtrl',function($scope){
$scope.onlyNumbers = /^[1-9]+[0-9]*$/;
})
View :
<div ng-app="app">
<br />
<br />
<div class="col-md-2" ng-controller="myCtrl">
<form name="myForm1">
<div class="form-group" ng-class="{'has-error':myForm1.number1.$invalid}">
<label for="">Following validation happens as the user entrs a value.</label>
<input class="form-control" ng-pattern="onlyNumbers" ng-model="value1" name="number1"/> Valid? {{myForm1.number1.$valid}}
</div>
</form>
<form name="myForm2">
<div class="form-group" ng-class="{'has-error':myForm2.number2.$invalid}">
<label for="">Following validation happens after blur </label>
<input class="form-control" ng-pattern="onlyNumbers" ng-model="value2" name="number2" ng-model-options="{ updateOn: 'blur'}"/> Valid? {{myForm2.number2.$valid}}
</div>
</form>
For more on how you can better this process through controllers refer this link
I seem to be overlooking something simple here but it has me stumped.
Why does nothing happen when i hit the submit button?
<section ng-controller="SavingsController as savingsCTRL">
<form name="createSavingForm" class="form-horizontal" novalidate>
<fieldset>
<!-- Title Box Start-->
<div class="form-group new-deal-form" show-errors>
<label for="title">Title</label>
<input name="title" type="text" ng-model="savingsCTRL.title" id="title" class="form-control" placeholder="Title" required>
<div class="sub-label">Enter the Title of the Deal.</div>
<div ng-messages="savingForm.savingsCTRL.title.$error" role="alert">
<p class="help-block error-text" ng-message="required">Saving title is required.</p>
</div>
</div>
<!-- Title Box End-->
<!--Submit Button Start-->
<div class="form-group buttons-cancel-submit">
<button class="btn btn-default " ng-click="savingsCTRL.cancel()">Cancel</button>
<input type="submit" class="btn btn-success " ng-click="savingsCTRL.create(); submitForm(createSavingForm.$valid)" >
</div>
</fieldset>
</form>
</div>
</div>
</section>
for simplicity i took most of the forms out but what else is wrong?
Savings Controller Function
// Create new Saving
$scope.create = function () {
$scope.error = null;
alert("create");
// Create new Saving object
var saving = new Savings({
title: this.title,
details: this.details,
retailer: this.retailer,
price: this.price,
link: this.link,
image: $scope.user.imageURL,
urlimage: this.urlimage,
tags: this.tags
//startdate: this.startdate,
//enddate: this.enddate
});
// Redirect after save
saving.$save(function (response) {
$location.path('savings/' + response._id);
// Clear form fields
$scope.title = '';
$scope.details = '';
$scope.retailer = '';
$scope.price = '';
$scope.link = '';
$scope.image = '';
$scope.urlimage = '';
$scope.tags = '';
}, function (errorResponse) {
$scope.error = errorResponse.data.message;
});
};
Main issue is, you are mixing controller as syntax with $scope.
According to documentation, we should use this instead of $scope.
... binds methods and properties directly onto the controller using this: ng-controller = "SettingsController1 as settings"
Than, submitForm is not a predefined method, it should be defined in controller first
this.submitForm = function(isValid){
console.log('Submitting form: ' + isValid)
}
In addition to that, bind that to form with ng-submit= "savingsCTRL.submitForm(createSavingForm.$valid)"
See Plunker, with working code. (I took ng-click="savingsCTRL.create()", since we don't have all parts of your application)
Bind the form submit event to ng-submit.
Example: ng-submit="submitForm(createSavingForm.$valid)"
I am trying to use angular's form validation from inside a templateUrl.
I have a directive that loads a templateUrl in which i have a form with inputs that get ng-required and ng-regex values from directive scope. Now, i tried to put in my directive's scope
form: '=', but when i access scope.form it is undefined.
I must specify that my submit button is outside of the form, and when clicked ng-click='save($index)' it must first check that the form is valid and then proceed with saving the edited data. scope.save() is defined in my directive.
this is from template:
<tr data-ng-repeat="row in source.data " data-ng-class="{'selected':row.$_selected}" >
<td data-ng-repeat="c in settings.columns" data-ng-click="toggleSelect(row)" >
<form name="editForm" id="editForm" novalidate>
<div ng-switch on="c.type" ng-show="editMode[$parent.$index]">
<span ng-switch-when="text" >
<input type="{{c.type}}" data-ng-model="row[c.name]" ng-required="{{c.isRequired}}" ng-pattern="{{c.regex}}"/>
</span>
<span ng-switch-when="select" >
<select data-ng-model="row[c.name]" ng-selected="row[c.name]" ng-init="row[c.name]" ng-options="item.value as item.name for item in c.items" ng-required="{{c.isRequired}}">
<!--<option data-ng-repeat="(value, name) in c.items" value="{{value}}">{{name}}</option>-->
</select>
</span>
<span ng-switch-when="textarea">
<textarea ng-model="row[c.name]" ng-required="{{c.isRequired}}" ng-pattern="{{c.regex}}">
</textarea>
</span>
<span ng-switch-when="checkbox">
<!--<label for="checkboxInput">{{c.name}}</label>-->
<input name="checkboxInput" type="checkbox" data-ng-model="row[c.name]" ng-true-value="{{c.true}}" ng-false-value="{{c.false}}"/>
</span>
<span ng-switch-default="">
{{row[c.name]}}
</span>
</div>
</form>
<span ng-hide='editMode[$parent.$index]'>{{row[c.name]}}</span>
</td>
<td>
<a href="{{row[settings.specialFields.url]}}" class="btn btn-default opacity75" data-ng-if="row[settings.specialFields.url]">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</td>
<td data-ng-if="row[settings.specialFields.isEditable]">
<button ng-click="edit(row)" ng-show="!editMode[$index]" class="btn btn-primary" >
edit {{$index}}
</button>
<button ng-click="save($index)" ng-disabled="" ng-show="editMode[$index]" class="btn btn-primary">
save
</button>
<button ng-click="cancel($index)" ng-show="editMode[$index]" class="btn btn-default">
cancel
</button>
</td>
</tr>
and this is from my directive:
scope: {
settings: '=',
source: '=',
form: '='
},
templateUrl: function (element, attr) {
return attr.templateUrl || 'src/grid.html';
},
link: function (scope, element, attrs) {
scope.editMode = [];
scope.editing = false;
scope.previousData = {};
scope.edit = function(field) {
scope.editing = scope.source.data.indexOf(field);
scope.editMode[scope.editing] = true;
scope.previousData = angular.copy(field);
};
scope.save = function(index){
console.log(scope.form);
scope.editMode[index] = false;
if (scope.editing !== false ) {
//do the saving
scope.editing = false;
}
};
scope.cancel = function(index){
scope.editMode[index] = false;
if (scope.editing !== false) {
scope.source.data[scope.editing] = scope.previousData;
scope.editing = false;
}
}
Here you go:
Working Form
Form button is outside of form, and could also be outside of directive. It doesn't matter with Angularjs.
There are two inputs, both have required and both have regex validation as you stated.
There is a directive with a templateURL
The important thing to remember here is that the form must have a name, and then it is referenced by that name as in: scope.myForm when
You don't have to name the input fields as I did in the plunker, but if you do, and they are ALL different values from one another, then you can do this: scope.myForm.myInputName.$valid to see if each input is valid if you wished.
But, the actual form will not be valid until ALL the inputs are valid, so you probably just need to call valid on the form itself as in in the provided example.
If you move the button outside of the directive, you will have to move the submit function from the directive to the controller (most likely).
Let me know if this helps, I can change things if needed. Also, try the plunker first with your question, then post what's going on with that new code; just fork the plunker and provide a link.
Here is the plunker code just in case...
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script data-require="angular.js#1.3.7" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script data-require="angular-ui-bootstrap#0.12.0" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<my-directive></my-directive>
</div>
</div>
</html>
<form name="myForm" novalidate>
<label>Input #1 (required)</label><br>
<input ng-model="form.data.myName" name='myName' ng-pattern="/\D+/" ng-required="true" /> <span ng-show="myForm.myName.$error.pattern">Takes anything but digits</span><br>
<br>
<label>Input #2 (required)</label><br>
<input ng-model="form.data.myEmail" name='myEmail' ng-pattern="/\d+/" ng-required="true" /> <span ng-show="myForm.myEmail.$error.pattern">Takes only digits</span>
</form>
<br>
<p># I'm a button that is outside of the form!</p>
<p ng-model="form.submitted">Form Submitted: <span class="blue">{{ form.submitted }}</span></p>
<p>Form Valid?: <span class="blue">{{ myForm.$valid }}</span></p>
<button ng-click="submitForm('myForm')">Submit Form</button>
<p ng-model="form.data">Here is the Form data:</p>
{{ form.data }}
var app = angular.module('myApp', []);
app.controller('MyCtrl', function ($scope) {});
app.directive("myDirective", function () {
return {
restrict: 'AE',
require: '?ngModel',
templateUrl: 'my-directive.html',
link: function (scope, elm, attrs, ctrl) {
scope.form = {submitted: false, data: {}};
scope.submitForm = function(formname){
console.log(scope[formname].myEmail)
console.log(scope.formname)
console.log(scope[formname].$valid)
scope.form.submitted = true;
}
} // end link
} // end return
});