If you add any of the angular directives for validation (ng-minlength, ng-maxlength, ng-pattern, etc.) to an input that is bound to a breeze entity it blocks any user input if found to be invalid.
If the value from ng-model is initially valid it shows up, but if you change the value to something invalid the input field is cleared, the model is set to null, and you can't input anything that may be initially invalid. However if you copy a valid value into the field it shows.
I would be fine with the fact that the model value is set to null when invalid if it didn't clear the input then prevent changes.
Also I have a feeling that whatever is causing this issue is also messing up ui-mask. The same thing happens there just without the angular validation directives.
here is a Plunker I found from a similar question that I modified to show my issue:
http://plnkr.co/edit/dVsF7GFY65a30soLL5W8?p=preview
Edit
After many many hours of research I did find a solution that works although I am not sure of any ill side effects.
It has to do with how angular does validation in the first place by setting the $modelValue to 'undefined' if it fails any validators as it makes it's way through $parsers and $formatters.
I found this code in Angular (line 16331) that gets called by each angular validator:
function validate(ctrl, validatorName, validity, value){
ctrl.$setValidity(validatorName, validity);
return validity ? value : undefined;
}
I changed it to return 'value' instead of 'undefined':
function validate(ctrl, validatorName, validity, value){
ctrl.$setValidity(validatorName, validity);
return value;
}
Angular still sets validation correctly. Although I am sure this isn't the best solution or even a good one.
I suspect the problem arises when Angular sets $modelValue to 'undefined' then Breeze sees that the model has changed and updates the entity which then updates the model which then clears the input and so forth... Or something like that...
I found this to be helpful in my quest. Maybe it will be helpful to one of you that knows much more than I https://github.com/angular/angular.js/issues/1412
Angular 1.3.0-rc.1 introduced the allowInvalid option for use with the ngModelOptions directive. It is essentially a formalization of the OP's hack at line 16331. The option instructs Angular to allow invalid form inputs to be written to $scope, and solves the problem neatly.
Usage:
<input type="email" ng-model-options="{allowInvalid: true}" ng-model="my_breeze_model.email"/>
See this feature request for more information: https://github.com/angular/angular.js/issues/8290.
I'm happy to look at your plunker and see if there is something Breeze can do about this.
I'm not terribly surprised. Ng also struggles when you combine it with HTML 5 validation as I recall. You really should only use one scheme I think.
Do you disagree?
Also, have you considered the zValidate directive in the Breeze Labs breeze.directives.js? We think that is the best way to expose Breeze entity property validation errors in the view.
Another solution to consider is to use the ng-model-options attribute made available with Angular 1.3+.
In this way, you can prevent the Angular digest occurring after every keypress, and instead defer it to, for example, the 'blur' event so that the use has a chance to actually enter the valid data.
It would look like this:
<input type="email" ng-model="customer.email" ng-model-options="{ updateOn: 'blur' }">
However, this still has the limitation that if you enter invalid input, on blur the input will be cleared out and the use will have to enter it all again. Not very user friendly in my opinion, so I'll be trying out the breeze-only approach to circumvent this issue.
However, I thought this solution was also worth mentioning here.
https://docs.angularjs.org/error/ngModel/numfmt describes how Angular considers it a programming error, not a user input error, if programmatic model changes don't respect the input's validation rules.
If your model does not contain actual numbers then it is up to the application developer to use a directive that will do the conversion in the ngModel $formatters and $parsers pipeline.
Their example describes a String model value for an <input type='number'> but the same logic applies here, I think. If your input contains a minLength attribute, the scope should not get updated with strings that are too short.
So to fix it, add a custom directive to your input that pushes a custom parser into the $parsers pipeline.
For instance, the following directive will hold off writing the value of an <input type='text' minLength='4' min4> to the scope until a long enough string has been typed into it:
.directive('min4', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$parsers.push(function(value) {
return value && value.length >= 4 ? value : "";
});
}
};
});
This prevents the nasty interactions that otherwise occur when Breeze writes updated values back to the scope and ends up overwriting not-yet-legal state in the input.
See Plunker demo
Related
I have a number input in an Angular Reactive form, I got a directive to limit the number of decimals, and that are working fine, I am looking to implement auto-correct as part of that directive, which is also kind of working but not the validation.
<input type="number" formControlName="TestPercentage" id="TestPercentage" max="100" step="0.25" numeric [decimals]="2"/>
ts file
this.form.addControl(formConstants.markupPercentage, new FormControl('', [Validators.min(0), Validators.max(100)]);
I am using the decimal number directive from https://gist.github.com/ahmeti/5ca97ec41f6a48ef699ee6606560d1f7 and the part where I am changing value
if (Number(currentValue) > Number(this.el.nativeElement.max)) {
this.el.nativeElement.value = parseFloat(this.el.nativeElement.max).toFixed(this.decimals);
this.el.nativeElement.updateValueAndValidity();
}
this one is making the value to max value but not removing the invalid class/ not revalidating or the new value assigned in the directive is not getting validated.
How can I trigger the validation once I changed/ corrected the element value?
The way I resolved this issue is by passing the abstract control to the directive and setting value using setvalue method, which resolved the issue.
Given:
<input type="password" ng-model="ctrl.fields.password" ng-minlength="8" />
{{ ctrl.fields.password.length }}
Nothing shows up until you've met the minimum length as required by the validation. That is, if the length of the password is less than 8, then the value of the model is null. Removing ng-minlength solves that problem.
This is quite unexpected behavior, as the validity of the field should have no bearing on the access to the model's value.
Is there a way to work around this in Angular 1.5? I want to show the user the length of their password as they type, but since the value is null until it's at least 8 characters, then I can't.
This is the way Angular $validators work: if validatiion fails, value is not passed from view to model, and model is reset.
Here's a good introduction to how Angular built-in validation works:
http://blog.thoughtram.io/angularjs/2015/01/11/exploring-angular-1.3-validators-pipeline.html
If you don't like this, angular-ui-validate is a good package that works in a non-disruptive way (i.e. model is always updated and you decide on what to do with the validation result).
Apparently some browsers allow users to type letters in a numeric input field (e.g. Chrome 46.0.2490.80 on mac or Chrome 41.0.2272.89 on Ubuntu). Furthermore, all the browser accept the character 'e' as in some particular conditions it can be considered a valid number.
Now, apparently Angular fails to update the model if the user intorduces any letters in that field.
You can see that in this fiddle:
http://jsfiddle.net/Y8Jg6/78/
<h1>Simple Data Binding with AngularJS</h1>
<br />
<div ng-app>
Name: <input type="number" ng-model="name" />
<br /><br />
Welcome to AngularJS {{name}}
</div>
Is this the expected behavior? In this way there are moments in which the model is not reflecting the value of the input field and that can lead to unexpected errors (I'm thinking about field validation for example)
If you are expecting a number, then any letters in that field would make the model value invalid (unless of course it is the 'e' that you mention). Angular 1.4.x uses this regex to determine if the number is allowed or not:
var NUMBER_REGEXP = /^\s*(\-|\+)?(\d+|(\d*(\.\d*)))([eE][+-]?\d+)?\s*$/;
As you can see, the 'e' or 'E' is valid in this case (but no other letters are). Your jsfiddle uses an older version of angular where the 'e' char seems to not be correctly parsed and therefore makes the model invalid. Here is the same jsfiddle using Angular 1.4.7 where it parses the number correctly (those containing e or E).
Your app would presumably use validation to determine that the model is populated if it is in fact a required field. If you truly want to allow non-numeric in your model, consider a different "type" on the input.
This works as expected, only when the input data is valid the model is updated
You might be able to override this behaviour with ngModelOptions : {allowInvalid: true} (does not work for input type=number afaik)
docs: https://docs.angularjs.org/api/ng/directive/ngModelOptions
Also see this question:
How can I override Angular's filtering of invalid form values, forcing Angular to persist the $viewValue to $modelValue?
I'm using angular 1.3.0rc2, and I'm trying to have an input field, on blur, set another input field as if it was user entered.
If there exists only a synchronous validator on the input I'm trying to set, and no debounce or async validators, things always seem to work as expected when I do something like:
myForm.username.$setViewValue('some value');
myForm.username.$render();
However, things don't seem to work as expected when either an async validator or debounce exists on the input I'm trying to set, and when the input I'm trying to set is in a currently invalid state.
I've created the following plunkr to demonstrate my woes. Try setting the value of "Full Name" and see what happens with the Username field, which I want to also be set on blur of the Full Name field. When the Username field is in an invalid state, changing the value of Full Name and then removing focus from the field does not update Username as I would expect.
http://plnkr.co/edit/h1hvf79W8ovqAlNLpBvS
So, my question is, how can I set one input field from another in such a way that it will work reliably and act as if the user themselves has entered this new input (thus running through validators and updating the model value accordingly)?
Give this a try, it should adjust the username when you blur the full name.
Plunkr
ngModel
HTML
Full Name:
<input name="fullName" ng-model="fullName" test-validator change-field="username" />
User Name:
<input name="username" ng-model="username" required />
JS
angular.module("testApp",[]).controller("testCtrl", function($scope) {
}).directive('testValidator', ['$sce', function ($sce) {
return {
restrict: 'A',
require: '?ngModel',
link: function (scope, element, attrs, ngModel) {
if(!ngModel) return;
element.on('blur', function () {
scope.$apply(read);
});
function read() {
if(attrs.changeField) {
var field = attrs.changeField;
scope.myForm[field].$setViewValue(element.val());
scope.myForm[field].$render();
}
}
}
}
}])
OK, So the basic problem we want to solve here is that having a user set an input that turns out to be invalid leads to the underlying model value being set to undefined, whereas programatically setting the input to an invalid state does not.
This was inconsistent, and so I was trying to find a way to circumvent that. It turns out that the resolution isn't as straightforward as hoped (see https://github.com/angular/angular.js/issues/9295)
However, the reverse solution was proposed instead, which involves using ngModelOptions on the enclosing form (or per input but thats more hassle) with "allowInvalid" set to true. This means that invalid values will still be set to the model, rather than the model value being cleared in that case.
Given that the model is always set now regardless of validity, I can revert to a simpler means of programatically setting one field form another - simply setting the underlying model value, and it behaves identically to if a user set the value themselves :)
plunkr demonstration with an async validator on the second input again:
http://plnkr.co/edit/lkDN4qLbbkN79EmRrxsY?p=preview
see how the model ends up the same regardless of whether the second input value is set by hand or set form the first input, irrespective of validity and the sue of async validator, as desired :)
I have an object that has 2 fields, while 1 should be less than or equal to another.
Say it's HDD quota settings and I need the threshold to be less than or equal to HDD's size.
I am trying to use angular's ui-utils#validate.
This is how I got so far: http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/preview (i hope the link will work)
The problem that I am having is that it works to one direction:
Setting size and then playing with threshold works ok
But if I try to change size, after threshold is in invalid state - nothing happens. This is because invalid threshold is not set on the model and size id being compared against null or undefined (or something like that).
On one hand I understand the logic of not setting invalid value on the model... but here it is getting in my way.
So, any help making this work will be appreciated.
I have played with custom directives and cooked something that works for my case.
On my input for threshold I have less-than-or-equal="quota.size" directive, passing it the model's property to validate against (I want quota.threshold to be less than or equal to quota.size):
<input type="number" name="threshold"
ng-model="quota.threshold"
required
less-than-or-equal="quota.size" />
In link function of lessThanOrEqual directive it starts to watch the quota.size and when quota.size changes it just tries to set the current view value of threshold on model:
link: (scope, elem, attr, ctrl) ->
scope.$watch attr.lessThanOrEqual, (newValue) ->
ctrl.$setViewValue(ctrl.$viewValue)
Then there is the parser that does the validation by calling scope.thresholdValidate(thresholdValue) method passing it the candidate value. This method returns true if validation succeeded and if it does - it returns the new value, otherwise - current model's value:
ctrl.$parsers.push (viewValue) ->
newValue = ctrl.$modelValue
if not scope.thresholdValidate viewValue
ctrl.$setValidity('lessThanOrEqual', false)
else
ctrl.$setValidity('lessThanOrEqual', true)
newValue = viewValue
newValue
I am pushing the parser to parser collection, as opposite to unshifting it like most of the examples suggest, because I want angular to validate required and number directives, so I get here only if I have a valid and parsed number (less work for me, but for text inputs I probably should do the parsing job)
Here is my playground: http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/preview
Better late than never, you need to add ng-model-options="{allowInvalid:true}" to your form input elements to stop this happening - the problem is that when a promise is rejected (e.g. using $q or $http) the model, by default, is not updated. Crazy huh! Cost me a day working this out.
I have written a plunkr specifically for this problem - Trust me this code is good ...
http://embed.plnkr.co/xICScojgmcMkghMaYSsJ/preview