I have used a directive to format number on textbox.
'use strict';
app.directive('numberOnly', function ($filter) {
return {
require: '?ngModel',
link: function (scope, elem, attrs, ctrl) {
if (!ctrl) {
return;
}
ctrl.$formatters.push(function () {
return $filter('number')(ctrl.$modelValue);
});
elem.bind('blur', function (event) {
var plainNumber = elem.val().replace(/[^\d|\-+|\.+]/g, '');
elem.val($filter('number')(plainNumber));
});
}
};
});
And in the html I was use:
<div class="row" ng-show="step === 1">
<div class="col-lg-6">
<label for="">Number1</label>
<div class="form-group">
<input type="text" class="form-control" number-only ng-model="mynumber1">
</div>
</div>
</div>
<div class="row" ng-show="step === 2">
<div class="col-lg-6">
<label for="">Number2</label>
<div class="form-group">
<input type="text" class="form-control" number-only ng-model="mynumber2">
</div>
</div>
</div>
In controller I set step = 1 as default. So when page loaded I see in textbox Number1 the value display as expected: 23,456
But when I change step = 2 to show the Number2 then the value in this textbox is 23456 (it not formatted).
Please let me know why it is and how to resolved it?
Related
I have $scope.loaded=false; in controller. Seems like directive doesn't pick up the scope, because ng-show="loaded" still shows DIV. But when I click button and controller changes $scope.sent to true, directive gets scope(it changes class as seen in directive).
Why is directive not picking $scope.loaded?
Message directive is loaded in other view:
<form class="form-horizontal" ng-submit="submit()">
<fieldset>
<!-- Form Name -->
<legend>Contact us</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Your name</label>
<div class="col-md-4">
<input id="name" name="textinput" type="text" placeholder="name" class="form-control input-md" ng-model="model.name" required>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Your email</label>
<div class="col-md-4">
<input id="from" name="textinput" type="email" placeholder="email" class="form-control input-md" ng-model="model.from" required>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="textarea">Content</label>
<div class="col-md-4">
<textarea class="form-control" id="content" name="textarea" ng-model="model.content" required>your message to us</textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-primary" ng-click>Submit</button>
</div>
</div>
<message-directive></message-directive>
</fieldset>
</form>
I have a custom directive:
(function (angular) {
angular.module('app')
.directive('messageDirective', [function () {
return {
restrict: 'E',
templateUrl: 'partials/message-directive',
scope: true,
link: function (scope) {
scope.loaded = true;
}
};
}]);
})(angular);
TemplateUrl:
<div class="form-group">
<label class="col-md-4 control-label" for="message"></label>
<div class="col-md-4">
<div ng-show="loaded" ng-class="sent ? 'alert alert-success' : 'alert alert-danger'">
{{message}}
</div>
</div>
</div>
Controller:
(function (angular) {
angular.module('app')
.controller('contactController', [
'$scope', 'contactService', function ($scope, contactService) {
$scope.model = {};
$scope.loaded = false;
var successCallback = function () {
$scope.message = "Sent!";
$scope.sent = true;
}
var errorCallback = function () {
$scope.message = "Error!";
$scope.sent = false;
}
$scope.submit = function() {
contactService.createContact($scope.model).then(successCallback, errorCallback);
}
}]);
})(angular);
the directive load after the controller .so your code
link: function (scope) {
scope.loaded = true;
}
rewrite the $scope.loaded
return {
restrict: 'E',
templateUrl: 'partials/message-directive',
scope: false,
link: function (scope) {
scope.loaded = true;
}
};
I am using custom angular directive for showing validation. Directive code is as below
angularFormsApp.directive('showErrors',['$timeout', function ($timeout) {
return {
restrict: 'A',
require: '^form',
link: function (scope, el, attrs, formCtrl) {
// find the text box element, which has the 'name' attribute
var inputEl = el[0].querySelector("[name]");
// convert the native text box element to an angular element
var inputNgEl = angular.element(inputEl);
// get the name on the text box so we know the property to check
// on the form controller
var inputName = inputNgEl.attr('name');
var helpText = angular.element(el[0].querySelector(".help-block"));
// only apply the has-error class after the user leaves the text box
inputNgEl.bind('blur', function () {
el.toggleClass('has-error', formCtrl[inputName].$invalid);
helpText.toggleClass('hide', formCtrl[inputName].$valid);
});
scope.$on('show-errors-event', function () {
el.toggleClass('has-error', formCtrl[inputName].$invalid);
});
scope.$on('hide-errors-event', function () {
$timeout(function () {
el.removeClass('has-error');
}, 0, false);
});
}
}
}]);
and Html is as below
<div class="container" id="login-form">
<img src="assets/img/logo-big.png">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
<h2>Login Form</h2>
</div>
<div class="panel-body">
<form name="loginForm" class="form-horizontal" novalidate>
<div class="form-group mb-md" show-errors>
<div class="col-xs-12">
<div class="input-group">
<span class="input-group-addon">
<i class="ti ti-user"></i>
</span>
<input type="text" class="form-control" placeholder="Username" autocomplete="Off" ng-required="true" name="username" autofocus ng-model="loginUser.username">
</div>
<span class="help-block" ng-if="loginForm.username.$error.required">Username is required</span>
</div>
</div>
<div class="form-group mb-md" show-errors>
<div class="col-xs-12" >
<div class="input-group">
<span class="input-group-addon">
<i class="ti ti-key"></i>
</span>
<input type="password" class="form-control" placeholder="Password"
name="password"
ng-model="loginUser.password" autocomplete="Off"
ng-required="true">
</div>
<span class="help-block" ng-if="loginForm.password.$error.required">Password is required</span>
</div>
</div>
<div class="form-group mb-n">
<div class="col-xs-12">
Forgot password?
<div class="checkbox-inline icheck pull-right p-n">
<label for="">
<input type="checkbox"></input>
Remember me
</label>
</div>
</div>
</div>
</form>
</div>
<div class="panel-footer">
<div class="clearfix">
Register
Login
</div>
</div>
</div>
</div>
</div>
</div>
Controller code :
var loginController = function ($scope, $window, $routeParams, $uibModal, $location, $filter, $rootScope, DataService, SharedProperties) {
$rootScope.bodylayout = 'focused-form animated-content';
$scope.loginUser = {
username: "",
password:""
}
$scope.load = function () {
//getAppointmentInfo();
};
$scope.SubmitLoginForm = function () {
$scope.$broadcast('show-errors-event');
if ($scope.loginForm.$invalid)
return;
}
}
angularFormsApp.controller("loginController", ["$scope", "$window", "$routeParams", "$uibModal", "$location", "$filter", "$rootScope", "DataService", "SharedProperties", loginController]);
Now When I open form below input control validation span is displaying by default . When I click on Login button then its showing in red and working fine.
problem is it shouldn't show by default when Page is opend.. Please see image below
Instead of this
loginForm.password.$error.required
try this
(loginForm.$submitted || loginForm.username.$dirty) && loginForm.password.$error.required
Take a look at the ng-messages directive. Its fairly elegant. Example:
<form name="myForm">
<input type="text" ng-model="field" name="myField" required minlength="5" />
<div ng-messages="myForm.myField.$error">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">The value entered is too short</div>
</div>
</form>
You can then combine it with any form validation. Just place the error messages from the validators onto the elements $error object and they are automatically rendered in your UI.
I ended up here as part of my search for an issue. In my case I was using a directive with a changing minimum value like this:
ngOnChanges(changes: SimpleChanges) {
if (changes.minDate && this.control) {
this.control.updateValueAndValidity({ onlySelf: true });
}
}
This means that the form will not be updated, I removed onlySelf and it worked correctly.
this.control.updateValueAndValidity();
Just leaving this as a breadcrumb in case someone else does something similar.
I created a directive to compare password and confirm password fields and show error message if it won't match.
(function () {
'use strict';
var compareTo = function () {
return {
require: "ngModel",
scope: {
otherModelValue: "=compareTo"
},
link: function (scope, element, attributes, ngModel) {
ngModel.$validators.compareTo = function (modelValue) {
return modelValue == scope.otherModelValue;
};
scope.$watch("otherModelValue", function () {
ngModel.$validate();
});
}
};
};
angular.module('StarterApp').directive("compareTo", compareTo);
})();
My HTML:
<form name="updatePwdForm" novalidate>
<md-input-container class="md-block">
<label for="password">Password:</label>
<input type="password" name="password" ng-model="ctrl.updatepassword.password" />
</md-input-container>
<md-input-container class="md-block">
<label for="confirmPassword">Confirm Password:</label>
<input type="password" name="confirmPassword" label="confirmPassword" ng-model="ctrl.updatepassword.confirmpassword" required
compare-to="ctrl.updatepassword.password" />
<div ng-messages="updatePwdForm.confirmPassword.$error" style="color:maroon" role="alert">
<div ng-message="required">Password and Confirm Password are not same!</div>
</div>
</md-input-container>
<md-button class="md-raised md-primary" ng-disabled="updatePwdForm.$invalid" ng-click="ctrl.updatePassword()">Update</md-button>
</form>
</md-content>
I am sure that my directive is comparing values and returning false if it won't match because my button is in disable mode still i type correct confirmpassword, but it's not showing my ngMessage.
am i missing something?
Thanks in advance.
Instead of
<div ng-message="required">
you should have
<div ng-message="compareTo">
Since the name of your validator is compareTo.
I am using a directive that validates number input boxes. I would like to change it to fit my needs. right now it allows me to enter numbers or text and throws the error message on button click. It also triggers the function. I would like it to instantly throw the error message when text is entered and I also would like to have the button disabled until both inputs are valid.
Sum it up, I need the error message triggered immediately on any text entered. and the button needs to be disabled until both fields are valid
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-12">
<label for="inputEmail3" class="control-label">Price</label>
<input class="form-control input-sm" to-number id="Price" type="number" ng-model="customSubjectProperty.price" ng-pattern=" /^\d+$/" placeholder="Price">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label class="control-label">Sqft</label>
<input class="form-control input-sm" to-number id="Sqft" type="number" ng-model="customSubjectProperty.sqft" ng-keypress="chartController.newInputKeyPress()" ng-pattern="/^\d+$/" placeholder="Sqft">
</div>
</div>
<div class="form-group">
<div class="col-md-12" style="margin-top:12px">
<button class="btn btn-primary btn-block btn-sm" ng-click="chartController.addSubjectPoint(customSubjectProperty)" ng-enter="chartController.addSubjectPoint(customSubjectProperty)">Add Point</button>
</div>
</div>
</form>
app.directive('toNumber', function () {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
ctrl.$parsers.push(function (value) {
return parseFloat(value || '');
});
}
};
});
app.directive('toNumber', function () {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
ctrl.$parsers.push(function (value) {
$(elem).on('keyup',callback),
return parseFloat(value || '');
$scope.apply()
});
}
};
Here's Fiddle Link
Update--> works great with angular 1.3 by setting ng-model-options but i am using 1.2 :(
Here's Fiddle Link
Currently when user click on submit error comes up and goes away once he entered valid input. But What i want is not to hide the errors as user enter valid info.If user re-enter the correct data errors should go away only on clicking submit button only.
HTML
<div ng-app="app" ng-controller="MainCtrl">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Order Form</h4>
</div>
<div class="panel-body">
<ng-include src="'form.html'"></ng-include>
</div>
</div>
</div>
<!-- kept seperate from the bootstrap markup to keep this example clean -->
<script type="text/ng-template" id="form.html">
<form name="form" valid-submit="sendForm()" novalidate>
<!-- call name-->
<div class="form-group clearfix" ng-class="{
'has-error': form.$submitted && form.orderNumber.$invalid,
'has-success': form.$submitted && form.orderNumber.$valid}">
<label class="col-sm-2 control-label" for="callName">Order Number</label>
<div class="col-sm-5">
<input id="orderNumber" name="orderNumber" class="form-control" type="text" ng-model="auth.orderNumber" ng-minlength="7" ng-maxlength="10" ng-pattern="/^[0-9]*$/" required ></input>
<div class="alert alert-danger" ng-show="form.$submitted && form.orderNumber.$error.required">Order Number required</div>
<span ng-show="form.$submitted && form.orderNumber.$error.pattern" class="help-block">Order number contains only numbers</span>
<span ng-show="form.$submitted && form.orderNumber.$error.minlength " class="help-block">Order number is too short</span>
<span ng-show="form.$submitted && form.orderNumber.$error.maxlength" class="help-block">Order number is too long</span>
</div>
</div>
<!-- last name-->
<div class="form-group clearfix" ng-class="{
'has-error': form.$submitted && form.confirmorderNumber.$invalid,
'has-success': form.$submitted && form.confirmorderNumber.$valid}">
<label class="col-sm-2 control-label" for="confirmorderNumber">Confirm Order Number</label>
<div class="col-sm-5">
<input id="lastName" name="confirmorderNumber" class="form-control" type="text" ng-model="person.lastName" data-match="auth.orderNumber" required></input>
<div class="alert alert-danger" ng-show="form.$submitted && form.confirmorderNumber.$error.required">required</div>
<span ng-show="form.$submitted && form.confirmorderNumber.$error.match" class="help-block">Order numbers must match</span>
</div>
</div>
<!-- form controls-->
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit!</button>
</div>
</form>
</script>
</div>
js
var app = angular.module('app', []);
// directive that prevents submit if there are still form errors
app.directive('validSubmit', [ '$parse', function($parse) {
return {
// we need a form controller to be on the same element as this directive
// in other words: this directive can only be used on a <form>
require: 'form',
// one time action per form
link: function(scope, element, iAttrs, form) {
form.$submitted = false;
// get a hold of the function that handles submission when form is valid
var fn = $parse(iAttrs.validSubmit);
// register DOM event handler and wire into Angular's lifecycle with scope.$apply
element.on('submit', function(event) {
scope.$apply(function() {
// on submit event, set submitted to true (like the previous trick)
form.$submitted = true;
// if form is valid, execute the submission handler function and reset form submission state
if (form.$valid) {
fn(scope, { $event : event });
//form.$submitted = false;
}
});
});
}
};
}
]);
app.directive('match', function () {
return {
require: 'ngModel',
restrict: 'A',
scope: {
match: '='
},
link: function(scope, elem, attrs, ctrl) {
scope.$watch(function() {
var modelValue = ctrl.$modelValue || ctrl.$$invalidModelValue;
return (ctrl.$pristine && angular.isUndefined(modelValue)) || scope.match === modelValue;
}, function(currentValue) {
ctrl.$setValidity('match', currentValue);
});
}
};
});
// handle form submission when the form is completely valid
app.controller('MainCtrl', function($scope) {
$scope.sendForm = function() {
alert('form valid, sending request...');
};
});