There is some unexpected behavior occurring in my project when $setPristine() is added to a function.
Here is a working JSFiddle that demonstrates the behavior:
http://jsfiddle.net/knot22/2x4yt0vb/21/
Here is the HTML:
<html ng-app="myApp">
<div ng-controller="formulaCtrlr as vm" >
<form name="vm.formContainer.form" autocomplete="off">
<div class="form-group" ng-class="{'has-error': vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$invalid}">
<label for="FatA" class="col-sm-2 control-label">Fat A</label>
<input name="FatA" type="text" class="form-control col-sm-10 input-sm" ng-required="true" ng-model-options="{updateOn: 'blur'}" ui-validate="{numberCheck: 'vm.numberCheck($value)', fatRangeCheck: 'vm.fatRangeCheck($value)'}" ng-model="vm.formulaInput.Fats[0]" /><span>%</span>
<span class="error" ng-show="vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$invalid">Invalid entry.</span>
<span class="error" ng-show="vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$error.numberCheck">{{vm.errorMessages.numberCheck}}</span>
<span class="error" ng-show="vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$error.fatRangeCheck">{{vm.errorMessages.fatRangeCheck}}</span>
</div>
<div class="form-group" ng-class="{'has-error': vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$invalid}">
<label for="FatB" class="col-sm-2 control-label">Fat B</label>
<input name="FatB" type="text" class="form-control col-sm-10 input-sm" ng-required="true" ng-model-options="{updateOn: 'blur'}" ui-validate="{numberCheck: 'vm.numberCheck($value)', fatRangeCheck: 'vm.fatRangeCheck($value)'}" ng-model="vm.formulaInput.Fats[1]" /><span>%</span>
<span class="error" ng-show="vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$invalid">Invalid entry.</span>
<span class="error" ng-show="vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$error.numberCheck">{{vm.errorMessages.numberCheck}}</span>
<span class="error" ng-show="vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$error.fatRangeCheck">{{vm.errorMessages.fatRangeCheck}}</span>
</div>
<div class="col-sm-offset-2">
<input type="reset" value="Clear" class="btn btn-default" ng-click="vm.clear()" ng-disabled="vm.formContainer.form.$pristine" />
</div>
</form>
<div>formula input: {{vm.formulaInput}}</div>
</div>
</html>
Here is the JS/AngularJS:
angular.module('myApp', ['ui.validate'])
.controller("formulaCtrlr", ['$scope', function ($scope) {
var vm = this;
vm.formContainer = {
form: {}
}
vm.formulaInput = {};
vm.formulaInput.Fats = [];
vm.clear = function () {
vm.formulaInput.Fats = [];
//vm.formContainer.form.$setPristine();
}
vm.errorMessages = {
numberCheck: 'Value must be a number.',
fatRangeCheck: 'Number must be between 0 and 100.'
}
vm.numberCheck = function (value) {
var result = !(isNaN(parseFloat(value)));
return result;
//return !(isNaN(parseFloat(value)));
}
vm.fatRangeCheck = function (value) {
var result = (value && value > 0.0 && value < 100.0);
return result;
//return (value && value > 0.0 && value < 100.0);
}
}]);
If the user types abc into the first input box and -20 into the second input box the validation error messages appear, as expected. When the user clicks the Clear button the input box contents are removed but the validation errors are still displayed. The goal is to clear out the input boxes and remove the validation error messages when the user clicks Clear. It seems like adding $setPristine() would achieve this. However...
To demonstrate the unexpected behavior:
enable //vm.formContainer.form.$setPristine();
click Run
type abc into the first input box and -20 into the second input box
click Clear button
The validation errors disappear, which is good, but the input boxes still contain abc and -20; this is the unexpected behavior. Why aren't the input box values being removed?
Here is a link to the JSFiddle that now works using $setPristine():
http://jsfiddle.net/knot22/rxqh8jtc/42/
Here is the pertinent part:
vm.clear = function () {
vm.formulaInput = {};
vm.formulaInput.Fats = [];
vm.formContainer.form.FatA.$setPristine();
vm.formContainer.form.FatB.$setPristine();
}
Related
In this plunk I have a form with two fields, each validated with ngMessage, where the error message appears when the user tabs out of the field, or the form is submitted.
The issue is that if the message is shown and then hidden (because the problem was fixed) the borders are still shown.
Try tabbing out of a field, then entering a value, you will see only borders in the error message.
How to get rid of these borders?
HTML
<body ng-app="ngMessagesExample" ng-controller="ctl">
<form name="myForm" novalidate ng-submit="submitForm()">
<label>
Enter Aaa:
<input type="text"
name="aaa"
ng-model="aaa"
required ng-blur="aaaBlur()" />
</label>
<div ng-show="showAaa || formSubmitted"
ng-messages="myForm.aaa.$error"
style="color:red;background-color:yellow;border:1px solid brown">
<div ng-message="required">You did not enter a field</div>
</div>
<br/>
<label>
Enter Bbb:
<input type="text"
name="bbb"
ng-model="bbb"
ng-minlength="2"
ng-maxlength="5"
required ng-blur="bbbBlur()" />
</label>
<br/><br/>
<div ng-show="showBbb || formSubmitted" ng-messages="myForm.bbb.$error"
style="color:red;background-color:yellow;border:1px solid brown">
<div ng-message="required">You did not enter a field</div>
</div>
<br/>
<button style="float:left" type="submit">Submit</button>
</form>
</body>
Javascript
var app = angular.module('ngMessagesExample', ['ngMessages']);
app.controller('ctl', function ($scope) {
$scope.formSubmitted = false;
$scope.showAaa = false;
$scope.showBbb = false;
$scope.submitForm = function() {
$scope.formSubmitted = true;
};
$scope.aaaBlur = function() {
$scope.showAaa = true;
};
$scope.bbbBlur = function() {
$scope.showBbb = true;
};
});
It's because you show the div (showAaa=true) but there's no content. Solution? Don't show the div. :)
<div ng-show="!myForm.aaa.$valid && (showAaa || formSubmitted)"
In which field do you have the problem ? Both or only the 2nd one ?
I see that in the 2nd field you fixed a min and max length. If they're not right, you don't have any ng-message to handle them, but your field will be in error, so you'll end up with the red border and no message.
By the way : you can use [formName].[fieldName].$touched instead of using your native onblur.
I'm trying to build a directive for my Angular to help with the integration of form fields. I've implemented Scott Allens solution from his Angular playbook, and it works fine for a normal stacked form.
I need however to adapt it to a horizontal form instead. Here's my code:
Markup
<div form-group>
<label for="name">Name</label>
<input type="text" id="name" ng-model="vm.name">
</div>
formGroup directive
function link(scope, element) {
setupDom(element[0]);
}
function setupDom(element) {
var label = element.querySelector("label");
label.classList.add("control-label");
var input = element.querySelector("input, textarea, select");
var type = input.getAttribute("type");
if (type !== "radio" && type !== "checkbox"){
input.classList.add("form-control");
}
element.classList.add("form-group");
}
function formGroup() {
return {
restrict: "A",
link: link
}
}
The output becomes:
<div form-group="" class="form-group">
<label for="name" class="control-label">Name</label>
<input type="text" id="name" ng-model="vm.name" class="form-control">
</div>
And that's fine for stacked form. Since I need a horizontal form, my output needs to look like this:
<div form-group="" class="form-group">
<label for="name" class="control-label col-sm-3">Name</label>
<div class="col-sm-9">
<input type="text" id="name" ng-model="vm.name" class="form-control">
</div>
</div>
I've tried many solutions and I can get it work with single elements like an input, textarea or a select. It becomes much more tricky when I have something like two radio buttons inside my markup like this:
<div form-group>
<label>Active</label>
<div class="radio">
<label>
<input type="radio" name="active" ng-value="true" ng-model="vm.active"> Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="active" ng-value="false" ng-model="vm.active"> No
</label>
</div>
</div>
The desired output of the above mentioned code should be:
<div form-group class="form-group">
<label class="control-label col-sm-3">Active</label>
<div class="col-sm-9">
<div class="radio">
<label>
<input type="radio" name="active" ng-value="true" ng-model="vm.active"> Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="active" ng-value="false" ng-model="vm.active"> No
</label>
</div>
</div>
</div>
Please notice that the input(s) in the form-group is not fixed. It can be either a single input, textarea, select, a group of radio buttons or checkboxes. I'm lost for how I can make that happen. Any help is appreciated. Thanks!
UPDATE
I made some small changes to Mark Veenstra's code to make it (sort of) working:
function setupDom(element) {
element.classList.add("form-group");
var label = element.querySelector("label");
label.classList.add("control-label", "col-sm-3");
var input = element.querySelector("input, textarea, select");
var type = input.getAttribute("type");
if (type !== "radio" && type !== "checkbox"){
input.classList.add("form-control");
angular.element(input).wrap(angular.element('<div class="col-sm-9"></div>'));
}
var div_radio = element.querySelector("div[class='radio']");
angular.element(div_radio).wrap(angular.element('<div class="col-sm-9"></div>'));
}
This does not work completely as intended with multiple radio inputs since it only wraps the <div> on the first radio input element.
The output from radio button example in my original post using Marks code is:
<div form-group="" class="form-group">
<label class="control-label col-sm-3">Active</label>
<div class="col-sm-9">
<div class="radio">
<label>
<input type="radio" name="active" ng-value="true" ng-model="vm.active" value="true"> Yes
</label>
</div>
</div>
<div class="radio">
<label>
<input type="radio" name="active" ng-value="false" ng-model="vm.active" value="false"> No
</label>
</div>
</div>
SOLUTION
Check out the Plunker with the final result: http://plnkr.co/edit/Wv6V86hHTCz3URS9DhdU?p=preview
In the angular.element documentation you can find the method wrap() to be able to wrap HTML around a selected element. Or see this direct link.
So what you could do in your directive is change the setupDom() function to match your requirements per type of form element.
function link(scope, element) {
setupDom(element[0]);
}
function setupDom(element) {
element.classList.add("form-group");
var label = element.querySelector("label");
label.classList.add("control-label col-sm-3");
var input = element.querySelector("input, textarea, select");
var type = input.getAttribute("type");
if (type !== "radio" && type !== "checkbox"){
input.classList.add("form-control");
input.wrap(angular.element('<div class="col-sm-9"></div>'));
}
var div_radio = element.querySelectorAll("div[class='radio']");
div_radio.wrap(angular.element('<div class="col-sm-9"></div>'));
}
function formGroup() {
return {
restrict: "A",
link: link
}
}
NOTE: This code is not tested, maybe there are some minor mistakes, but I guess you'll get the point now.
Mark's suggestion came close, but it didn't solve my problem completely. I ended up using the following code in my formGroup directive:
(function (module) {
"use strict";
function link(scope, element) {
setupDom(element[0]);
}
function setupDom(element) {
element.classList.add("form-group");
var children = angular.element(element).children();
var labels = children.splice(0, 1);
// Set label classes
labels[0].classList.add("control-label", "col-sm-3");
// Wrap children in div
angular.element(children).wrapAll(angular.element("<div class='col-sm-9'></div>"));
// Handle inputs
var inputs = element.querySelectorAll("input, textarea, select");
for (var i = 0, len = inputs.length; i < len; i++) {
var input = inputs[i],
type = input.getAttribute("type");
if (type !== "radio" && type !== "checkbox") {
input.classList.add("form-control");
}
}
}
function formGroup() {
return {
restrict: "A",
link: link
}
}
module.directive("formGroup", formGroup);
}(angular.module("app.core")));
Check out this Plunker to see it in action: http://plnkr.co/edit/Wv6V86hHTCz3URS9DhdU?p=preview
This is my code and I want to set focus on first name textbox on form submit if first name textbox has error like $error.required,$error.pattern,$error.minlength or $error.maxlength.
<form class="form-horizontal" name="clientForm" id="clientForm" novalidate ng-submit="clientForm.$valid" ng-class="{ loading:form.submitting }">
<div class="form-group">
<label class="col-lg-2 control-label">First Name</label>
<div class="col-lg-8">
<input type="text" ng-model="client.firstName" class="form-control" required autofocus name="firstName" autocomplete="off" ng-maxlength="100" ng-minlength=3 ng-pattern="/^[a-zA-Z]*$/" />
<!--<span ng-show="clientForm.firstName.$dirty && clientForm.firstName.$invalid" class="error">First Name is required.</span>-->
<div class="errors" ng-show="clientForm.$submitted || clientForm.firstName.$touched">
<div class="error" ng-show="clientForm.firstName.$error.required">
First Name is required.
</div>
<div class="error" ng-show="clientForm.firstName.$error.pattern">
Enter valid name.
</div>
<div class="error" ng-show="clientForm.firstName.$error.minlength">
First Name is required to be at least 3 characters
</div>
<div class="error" ng-show="clientForm.firstName.$error.maxlength">
First Name cannot be longer than 100 characters
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button></form>
This question is a duplicate of:
Set focus on first invalid input in AngularJs form
You can use a directive on the form:
<form accessible-form>
...
</form>
app.directive('accessibleForm', function () {
return {
restrict: 'A',
link: function (scope, elem) {
// set up event handler on the form element
elem.on('submit', function () {
// find the first invalid element
var firstInvalid = elem[0].querySelector('.ng-invalid');
// if we find one, set focus
if (firstInvalid) {
firstInvalid.focus();
}
});
}
};
});
Here is a working Plunker:
http://plnkr.co/edit/wBFY9ZZRzLuDUi2SyErC?p=preview
You'll have to handle this using directive. For example:
It will iterate through the element(s) and check if the focusNow attribute is true or not. Make sure that the error handler code sets the expression true/false.
.directive('focusNow', function ($timeout) {
return {
link: function (scope, element, attrs) {
scope.$watch(attrs.focusNow, function (value) {
if (value === true) {
for (var i = 0; i < element.length; i++) {
var ele = angular.element(element[i].parentNode);
if (!ele.hasClass('ng-hide')) { //Skip those elements which are hidden.
element[i].focus();
}
}
}
});
}
};
});
and in the HTML, you'll have:
<input type="text" focus-now="expression" />
where expression will be a normal expression which will evaluate to true in case of error.
You can try this: i.e add ng-focus="clientForm.$error" in first name input
<input type="text" ng-focus="clientForm.$invalid" ng-model="client.firstName" class="form-control" required autofocus name="firstName" autocomplete="off" ng-maxlength="100" ng-minlength=3 ng-pattern="/^[a-zA-Z]*$/" />
i am trying to find duplicate value enter in textbox which check each input value on ng-change.then show message "sos number has a match".tried this one but still sort make list data in order. resulting, regular message jsfiddle
so far i am unsuccessful. following is code. :
html code:
<form name="settingForm" ng-submit="mangeDeviceSettings()"><div class="form-group">
<div data-ng-repeat="i in sosLength track by $index">
<ng-form name="sosNumForm">
<span class="input-icon"> <input type="text" ng-disabled="!showPendingStatus" watch-change="change()"
class="form-control" name="SOSNumber" ng-minlength="10" ng-maxlength="13" placeholder="SOSNumber{{$index+1}} No." ng-pattern="/^[0-9]+$/"
ng-model="deviceSettings.sos[$index]" ng-change="sosChange($index,this)">
<i class="fa fa-mobile"></i></span>
<span ng-show="IsMatch{{$index}} && sampleSOS && sosNumForm.SOSNumber.$dirty">SOS Number has a match!</span>
<span ng-show="(sosNumForm.SOSNumber.$error.minlength || sosNumForm.SOSNumber.$error.maxlength) && sosNumForm.SOSNumber.$dirty">Mobile Number must be between 10 and 13 digits </span>
<span ng-show="!sosNumForm.SOSNumber.$error.minlength && !sosNumForm.SOSNumber.$error.maxlength && sosNumForm.SOSNumber.$error.pattern && sosNumForm.SOSNumber.$dirty">Number must contain only numbers</span>
</ng-form>
</div>
</div>
</div></form>
ng-change method:
$scope.sosChange=function(idx, obj){
$scope.sampleSOS = true;
$scope.fnfDuplicate=true;
obj.$parent.settingForm.$valid = obj.sosNumForm.$valid;
// console.log(obj.$parent.settingForm.$valid);
// console.log(obj.sosNumForm.$valid);
console.log($scope.deviceSettings.sos[idx]);
console.log($scope.deviceSettings.sos[i] );
// console.log(obj.sosNumForm.$valid);
// console.log($scope.deviceSettings.sos[idx]!="");
for (var i = 0; i < 3; i++) {
if(idx != i ){
if ($scope.deviceSettings.sos[idx] == $scope.deviceSettings.sos[i]
&& obj.sosNumForm.$valid && $scope.deviceSettings.sos[idx]!="") {
if(idx==0){
$scope.IsMatch0=true; $scope.sosDuplicate=true;
return false;
}
if(idx==1){
$scope.IsMatch1=true; $scope.sosDuplicate=true;
return false;
}
if(idx==2){
$scope.IsMatch2=true; $scope.sosDuplicate=true;
return false;
}
}
else{
if(idx==0){
$scope.IsMatch0=false; $scope.sosDuplicate=false;
return false;
}
if(idx==1){
$scope.IsMatch1=false; $scope.sosDuplicate=false;
return false;
}
if(idx==2){
$scope.IsMatch2=false; $scope.sosDuplicate=false;
return false;
}
}
// $scope.sosDuplicate=true;
}
}
}
If I understood you correctly you simply want to have a validation that two fields have the same value... like password and confirm password... Ill paste a snippet with that (its for password and confirm password) but from there Im sure you can get what you need
I also dont see a need for ngChange since the two items are in the scope so you just want to do a validation if they are not equal.
<div class="form-group required" ng-class="{ 'has-error' : changePasswordForm.password.$invalid && submitted}">
<label class="col-md-3 control-label">New Password </label>
<div class="col-md-8">
<input class="form-control" name="password" ng-model="user.password" ng-minLength="6" type="password" required>
<p ng-show="changePasswordForm.password.$error.minlength && submitted" class="help-block">Password must be atleast 6 characters long.</p>
<p ng-show="changePasswordForm.password.$error.required && !changePasswordForm.password.$error.minlength && submitted" class="help-block">Password is required.</p>
</div>
</div>
<div class="form-group required" ng-class="{ 'has-error' : (changePasswordForm.confPassword.$invalid || user.password!== user.confPassword) && submitted}">
<label class="col-md-3 control-label">Confirm password </label>
<div class="col-md-8">
<input class="form-control" name="confPassword" ng-model="user.confPassword" type="password" required>
<p ng-show="changePasswordForm.confPassword.$invalid && submitted" class="help-block">This field is required.</p>
<p ng-show="changePasswordForm.confPassword.$valid && user.password!== user.confPassword && submitted" class="help-block">Passwords must match.</p>
</div>
</div>
and submitted is for checking when submitted... not required
so here you see we check if the two scope items are not equal and accordingly we show the error...
in the controller all you need is
$scope.onSubmit = function () {
$scope.submitted = true;
if ($scope.createProfileForm.createUserForm.$valid && $scope.user.password === $scope.user.confPassword) {
$scope.submitted = false;
}
}
html code:
<div class="form-group"> <!-- <div data-ng-repeat="i in sosLength track by $index"> -->
<div data-ng-repeat="i in persons track by $index">
<ng-form name="sosNumForm">
<span class="input-icon"> <input type="text" ng-disabled="!showPendingStatus" watch-change="change()"
class="form-control" name="SOSNumber" ng-minlength="10" ng-maxlength="13" placeholder="SOSNumber{{$index+1}} No." ng-pattern="/^[0-9]+$/"
ng-model="deviceSettings.sos[$index]" ng-change="sosChange(this,deviceSettings.sos[$index])">
<i class="fa fa-mobile"></i></span>
<!-- <span ng-show="IsMatch{{$index}} && sampleSOS && sosNumForm.SOSNumber.$dirty">SOS Number has a match!</span> -->
<span ng-if="i.isDuplicate"> SOS Number has a match!</span>
<span ng-show="(sosNumForm.SOSNumber.$error.minlength || sosNumForm.SOSNumber.$error.maxlength) && sosNumForm.SOSNumber.$dirty">Mobile Number must be between 10 and 13 digits </span>
<span ng-show="!sosNumForm.SOSNumber.$error.minlength && !sosNumForm.SOSNumber.$error.maxlength && sosNumForm.SOSNumber.$error.pattern && sosNumForm.SOSNumber.$dirty">Number must contain only numbers</span>
</ng-form>
</div>
</div>
JS code:
$scope.sosDuplicate=true;
$scope.fnfDuplicate=true;
$scope.persons = [{sos:""},{sos:""},{sos:""}];
$scope._persons = [{fnf:""},{fnf:""}];
$scope.fnfValid = true;
$scope.sosValid = true;
$scope.sosChange=function(obj,value){
var sorted, i;
var count =0, checker;
// obj.$parent.settingForm.$valid = obj.sosNumForm.$valid;
$scope.sosValid = obj.sosNumForm.$valid;
if(value!="undefined" || value != "")
{
for (var i = 0; i < 3; i++) {
checker = parseInt($scope.deviceSettings.sos[i]);
$scope.persons[i].sos = checker==NaN ? "" : checker;
};
sorted = $scope.persons.concat().sort(function (a, b) {
if (a.sos > b.sos) return 1;
if (a.sos < b.sos) return -1;
return 0;
});
for(i = 0; i < $scope.persons.length; i++) {
sorted[i].isDuplicate = ((sorted[i-1] && sorted[i-1].sos == sorted[i].sos) || (sorted[i+1] && sorted[i+1].sos == sorted[i].sos)
|| (sorted[i+2] && sorted[i+2].sos == sorted[i].sos)|| (sorted[i-2] && sorted[i-2].sos == sorted[i].sos));
if(sorted[i].isDuplicate==true){
count+=1;
console.log(count);
}
$scope.sosDuplicate= (count>1) ? true : false;
}
}
}
I have a simple form where I have applied AngularJS validation on a input box containing number value. On submit, it works fine but when I click on Reset button, it gives the input box validation error message. Looks like it is calling ng-submit after ng-click of Reset button. I have tried resetting the value of input field in ng-click, removed type='Reset' and also used $setPristine() on the form. But nothing helps. Below is the code.
<form name="myForm" novalidate ng-submit="submitFilter()">
Enter Age:
<div>
<input name="age" ng-class="{errorinput: submitted && myForm.age.$invalid }" class="form-control" ng-pattern="/^[0-9]+$/" placeholder="Age" type="text" ng-model="age" required>
</div>
<span class="error" ng-style="{color:'red'}" ng-show="submitted && myForm.age.$invalid">Please enter a valid Age</span>
<button type="submit">
Submit
</button>
<button ng-click="reset(myForm)">
Reset
</button>
</form>
Controller:
var original = $scope.age;
$scope.submitFilter = function () {
if ($scope.filterForm.$valid) {
} else {
$scope.submitted = true;
}
};
$scope.reset = function (myForm) {
$scope.age = angular.copy(original);
$scope.myForm.$setPristine();
};
Kindly help in getting rid of this error.
Thanks in Advance.
Setting the reset button's type as 'button' should work. Following code works perfectly on my machine.
// Code goes here
app.controller('mainController', function($scope) {
$scope.age = 123;
var original = $scope.age;
$scope.submitFilter = function () {
$scope.submitted = true;
};
$scope.reset = function (myForm) {
$scope.age = angular.copy(original);
$scope.myForm.$setPristine();
};
});
<form name="myForm" novalidate ng-submit="submitFilter()">
Enter Age:
<div>
<input name="age" ng-class="{errorinput: submitted && myForm.age.$invalid }" class="form-control" ng-pattern="/^[0-9]+$/" placeholder="Age" type="text" ng-model="age" required>
</div>
<span class="error" ng-style="{color:'red'}" ng-show="submitted && myForm.age.$invalid">Please enter a valid Age</span>
<button type="submit">
Submit
</button>
<button type="button" ng-click="reset(myForm)">
Reset
</button>
</form>