Develop Reference

Angular directive for range validation

I am trying to make a directive for an input to limit the value between 1-99. On the same input I also have another directive that converts the value to a percentage and am not sure if that is what is getting in the way.
The directive is simple (taken basically from the Angular website):
(function() {
'use strict';
angular
.module('app.model')
.directive('inputRange', inputRange);
function inputRange() {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, elm, attrs, ctrl) {
var INTEGER_REGEXP = /^-?\d+$/;
ctrl.$validators.inputRange = function(modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue)) {
// consider empty models to be valid
return true;
}
if (INTEGER_REGEXP.test(viewValue)) {
// it is valid
return true;
}
// it is invalid
return false;
};
}
}
}
});
And the section of html with the input field (which is paired with a slider):
<form name="form">
<div sc-slider
ng-model="vm.baseline"
min="0.01"
max="0.99"
initial="{{vm.baseline}}"
step="0.01"
uib-tooltip="The initial estimate of the KIQ's likelihood - prior to any indicator observations."
tooltip-popup-delay="200"
tooltip-popup-close-delay="200"
tooltip-placement="bottom"></div>
<input to-percent
input-range
name="baseline"
style="text-align:center;"
type="text"
min="1"
max="99"
class="form-control"
ng-model="vm.baseline"></input>
<span ng-show="form.baseline.$error.inputRange">The value is not a valid integer!</span>
<span ng-show="form.baseline.$error.min || form.baseline.$error.max">
The value must be in range 1 to 99!</span>
</form>
I have read on SO about priority for directives that share an input but I don't think that is necessarily an issue here. But when I enter a value greater than 99 I'd expect one of the spans below to show up, but nothing is appearing. And my other directive works fine all of the time. Any help is appreciated.

Make your life easier and use ng-max and ng-min attributes on the input element.

AngularJS currency filter on input field

I have the following input field
<input type="text" class="form-control pull-right" ng-model="ceremony.CeremonyFee | number:2">
it is showing up correctly but has been disabled. The error I am receiving is "[ngModel:nonassign] Expression 'ceremony.CeremonyFee | number:2' is non-assignable". I understand why it is in error, but do not know how to get this to work on an input field. Thanks.

input with ng-model is for inputting data, number filter is for displaying data. As filter values are not bindable, they are not compatible, as you can see. You have to decide what you want to do with that input.
Do you want it to be an input? User can input his own number and you only needs to validate? Use i.e. pattern attribute:
<input type="text" ng-model="ceremony.CeremonyFee" pattern="[0-9]+(.[0-9]{,2})?">
Do you want it to be an output? User does not need to input his own value? Do not use ng-model, use value instead:
<input type="text" value="{{ceremony.CeremonyFee | number:2}}" readonly>

UPDATE:
really I don't understand what you need, but, if you want just that users can insert only two digits you should use a simple html attributes, have a look on min, max, step...
Follows a pure js solution, but I don't suggest something like that!
angular.module('test', []).controller('TestCtrl', function($scope) {
var vm = $scope;
var testValue = 0;
Object.defineProperty(vm, 'testValue', {
get: function() { return testValue; },
set: function(val) {
val = Number(val);
if(angular.isNumber(val) && (val < 100 && val > 0)) {
console.log(val);
testValue = val;
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="test">
<div ng-controller="TestCtrl">
<input style="display:block; width: 100%; padding: 1em .5em;" type="number" ng-model="testValue" />
</div>
</section>
the ng-model directive requires a viewmodel assignable (or bindable) property, so, you cannot add a pipe...
angular.module('test', [])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-init="testValue = 0">
<label ng-bind="testValue | currency"></label>
<input style="display:block;" ng-model="testValue" type="number"/>
</div>

As an error states you have got an 'non-assignable' expression in your ng-model attribute.
You should use only ceremony.CeremonyFee.
| is used on ng-repeat to indicate what expression should be used as filter.
If you want to have that <input> populated with initial data in your controller/link you should give it an initial value ex.
$scope.ceremony = {
CeremonyFee: 'My first ceremony'
}
And every time your <input> element data will be changed CeremonyFee will be updated as well.

I found and used the solution found on this page.
http://jsfiddle.net/k7Lq0rns/1/
'use strict';
angular.module('induction').$inject = ['$scope'];
angular.module('induction').directive('format',['$filter', function ($filter) {
  return {
require: '?ngModel',
link: function (scope, elem, attrs, ctrl) {
if (!ctrl) return;
ctrl.$formatters.unshift(function (a) {
return $filter(attrs.format)(ctrl.$modelValue)
});
elem.bind('blur', function(event) {
var plainNumber = elem.val().replace(/[^\d|\-+|\.+]/g, '');
elem.val($filter(attrs.format)(plainNumber));
});
}
  };
}]);
relatively easy to apply it.

Automatically add formatting to input field as user types

My application is Angular 1.3.10
I am currently adding a backslash to the expiration input field with a jQuery function, see below.
The expiration input is formatted for MM/YY and the '/' is automatically added once the user types the third number. It was a quick fix, but I need to move it into $scope. I've gave it the good ol' college try but am blocked, so I am hoping those much smarter than me can lend a hand.
Current jQuery code I need to move to Angular $scope:
$(document).ready(function () {
$("#cc-exp").keypress(function () {
if ($(this).val().length == 2) {
$(this).val($(this).val() + "/");
}
});
});
The expiration html input field:
<md-input-container>
<label>Expiration MM/YY</label>
<input ng-model="expiration" id="cc-exp" ng-pattern="/^\d{2}\/\d{2}$/" name="expiration" type="tel" class="long cc-exp" minlength="5" maxlength="5" required>
<div ng-messages="payment.expiration.$error" ng-if="payment.$submitted" class="validation-error-display">
<div ng-message="required">Please enter an expiration date.</div>
<div ng-message="pattern">Must contain numbers only.</div>
<div ng-message="minlength">Must be MM/YY format.</div>
<div ng-message="maxlength">Must be MM/YY format.</div>
</div>
</md-input-container>

How about using $scope.$watch, this function will be called every time the expiration is changed:
$scope.$watch('expiration',function(newValue, oldValue){
if(newValue.length == 2) $scope.expiration = $scope.expiration +'/';
});
https://docs.angularjs.org/api/ng/type/$rootScope.Scope

Using directive would be good choice
Markup
<input ng-model="expiration" id="cc-exp" ng-pattern="/^\d{2}\/\d{2}$/" name="expiration"
my-dir type="tel" class="long cc-exp" minlength="5" maxlength="5" required>
Directive
app.directive('myDir', function() {
return {
restrict: 'AE',
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
element.on('keypress', function(e) {
var val = ngModel.$viewValue;
if (val.length == 2) {
scope.$apply(function() {
ngModel.$setViewValue(val + "/");
});
}
});
}
}
})

How to get min and max values of input angularjs

currently I'm using a custom directive which wraps the ng-minlength and ng-maxlength directives to apply the values of these directives to the model of the input. I need to do this because I'm creating a validation service which uses the angular $error object on a form to return a user friendly message about what's wrong. The problem is, when it comes to min and max lengths, I want to be able to tell the user what the length should be. I've got this working by using the following method
directive('minlength', ['$compile', function ($compile) {
return {
restrict: 'A',
require: 'ngModel',
compile: function compile(tElement) {
tElement.attr('ng-minlength', tElement.attr('minlength'));
tElement.removeAttr('minlength');
return {
post: function postLink(scope, elem, attrs) {
var keys,
form,
field = attrs['ngModel'];
$compile(elem)(scope);
for (keys in scope) {
if (scope.hasOwnProperty(keys)) {
if (keys.substring(0, 2).indexOf('$') < 0) {
if (keys !== 'this') {
form = keys;
break;
}
}
}
}
if (form) {
console.log(attrs);
scope[form][field]['minlength'] = attrs['minlength'];
}
}
}
}
}
}])
But this seems a bit longhanded and possibly difficult to maintain and test. Is there a better way to do this?

If you want just to inform the user about the min and the max:
var app = angular.module('myApp',[]);
app.controller('MyCtrl',function($scope){
$scope.minValue = 5;
$scope.maxValue = 10;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<form name="myForm">
Last name: <input type="text" name="lastName" ng-model="user.last"
ng-minlength="{{minValue}}" ng-maxlength="{{maxValue}}">
<span class="error" ng-show="myForm.lastName.$error.minlength">
Should be {{minValue}} charachters long</span>
<span class="error" ng-show="myForm.lastName.$error.maxlength">
No more than {{maxValue}} characters please</span><br>
</form>
</div>
</div>

Clear data in angular form

I have the following angular form:
<form name="client_form" id="client_form" role="form">
<div class="bb-entry">
<label for="firstname">First Name:*</label>
<input type="text" name="firstname" ng-model="client.first_name" required class="form-control"/>
</div>
<div class="bb-entry">
<label for="lasttname">Last Name:*</label>
<input type="text" name="lastname" ng-model="client.last_name" required class="form-control"/>
</div>
<div class="bb-entry">
<label for="email">E-mail:*</label>
<input type="email" name="email" ng-model="client.email" required class="form-control"/>
</div>
</form>
<button type="button" ng-click="resetForm(client_form)">Clear</button>
I would like to add behaviour so that when users select 'Clear', all form data is cleared. I've written this method at present:
resetForm: (form) ->
form.submitted = false
form.$setPristine()
angular.copy({}, client)
However, this clears the entire client object, when really, I only want to clear the attributes referenced in my form.
I realise I can iterate around each attribute of the form object, which gives me access to the ngModelController instances as such:
resetForm: (form,) ->
form.submitted = false
form.$setPristine()
angular.forEach form, (value, key) ->
if value.hasOwnProperty("$modelValue")
# set model value here?
But can I actually assign the model value here or would a different approach be better?

I think you need to copy the client first, then clear the new client object.
Here is a fiddle link that does something very similar: http://jsfiddle.net/V44fQ/
$scope.editClient = function(client) {
$scope.edit_client = angular.copy(client);
}
$scope.cancelEdit = function() {
$scope.edit_client = {};
};
<form name="client_form" id="client_form" role="form">
<div class="bb-entry">
<label for="firstname">First Name:*</label>
<input type="text" name="firstname" ng-model="edit_client.first_name" required class="form-control">
</div>
...
<button type="button" ng-click="cancelEdit()">Clear</button>
</form>

I solved the problem by writing two directives, one that is attached to the form and the other to each individual input that I want to be 'resettable'. The directive attached to the form then adds a resetForm() method to the parent controller:
# Adds field clearing behaviour to forms.
app.directive 'bbFormResettable', ($parse) ->
restrict: 'A'
controller: ($scope, $element, $attrs) ->
$scope.inputs = []
$scope.resetForm = () ->
for input in $scope.inputs
input.getter.assign($scope, null)
input.controller.$setPristine()
registerInput: (input, ctrl) ->
getter = $parse input
$scope.inputs.push({getter: getter, controller: ctrl})
# Registers inputs with the bbFormResettable controller allowing them to be cleared
app.directive 'bbResettable', () ->
restrict: 'A',
require: ['ngModel', '^bbFormResettable'],
link: (scope, element, attrs, ctrls) ->
ngModelCtrl = ctrls[0]
formResettableCtrl = ctrls[1]
formResettableCtrl.registerInput(attrs.ngModel, ngModelCtrl)
Probably overkill, but this solution ensures only the attributes specified are cleared, not the entire client object.

No need to complicate things. Just clean the scope variables in your controller.
Plain JS:
$scope.resetForm = function() {
$scope.client.first_name = '';
$scope.client.last_name = '';
$scope.client.email = '';
}
If you wish, you can parse the $scope.client object and set properties to false (if the form is dynamic, for example).
Here is a simple example: http://jsfiddle.net/DLL3W/