I have 2 inputs.
<input type="number" ng-model="samount" ng-change="getSR(samount)">
<input type="number" ng-model="ramount" ng-change="getRS(ramount)">
in controller
$scope.getSR = function(amount) {
$scope.ramount = parseFloat((amount*5.25).toFixed(3));
};
$scope.getRS = function(amount) {
$scope.samount = parseFloat((amount/5.25).toFixed(3));
};
I enter some data in input 1 and do some calculations and update value of input 2 with function in controller. This works, but when I enter data in input 2 reverse calculate and update input 1. For some reason, input 1 value is not updating. I used $scope.$watch to see if input 1 is updated and it is updating in $watch, but not in view.
If I reload and start with input 2 it works, input 1 updates, but typing input 1 doesn't update again. they are in same scope but ng-change is different functions.
$scope.$apply() in each function gives error apply already in progress.
Is there way to fix this issue?
EDIT: added example code
First of all, your code works https://jsfiddle.net/5m18jfy9/
Anyway, I think you miss the rule of dot. When you binding data to your model in scope, use object as namespace. For example:
ng-repeat='carname' //this could brake 2-way data binding in some point
ng-repeat-'car.name' //this will always update properly your model and template
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.
I am quiet recent to angular 2 and was bumping my head around two way data binding. Here is the confusion:
<input (input)="username = $event.target.value" id="testing">
<p>{{username}}</p>
This serves the purpose well. It already seems to be two way data binded. I can access username inside the component and the value property of the input element is updated as well. Why do i need [ ] at all then? What is the two way binding here? what goes inside the component and what comes out of the component.
Disclaimer: I know it's a very naive and seemingly stupid question :|
As i understand write like you did:
(input)="username = $event.target.value"
is the same as:
[(input)]="username"
So they're both 2 way data binding
if you want only one way:
(input)="username"
https://angular.io/docs/ts/latest/guide/template-syntax.html
Angular 2 data binding is explained here.
When you write in the input you execute: "username = $event.target.value", wich assigns to the variable user the value you enter.
That means that the following html does the same:
[(ngModel)]="username"
[username]="username" (input)="updateUserName()"
(input)="username = $event.target.value" and {{userName}}
I have made an AngularJS directive that requires a model and converts the value of the model (which, in this example is "25mm") to something else that is showed in the view (in this example, converted to inches).
Here is a working plnkr demo: http://plnkr.co/edit/fO1S9GcubHE57Pf7Kt9G?p=preview
The demo, however, doesn't work as expected. After changing the value of the dropdown from "inches" to "feet", I'd expect the view to be re-rendered with the appropriate value. This is not the case.
I have noticed that this is because I'm not "listening" for changes, and that is why I placed the
scope.$watch("[convertFrom, convertTo]", function(n) {
});
which works fine in terms of watching for changes, but if I uncomment that $watch, the formatter stops working.
My second problem is that I'm pushing functions to the arrays $formatters and $parsers. To be exact, one function every time the value of the dropdown changes.
My questions are:
How can I watch for changes and make the formatter work?
How can I not insert a new function in the $formatter and the $parser arrays every time my dropdown changes.
I managed to do it myself. Here is a plunkr demo: http://plnkr.co/edit/jgF2QIP4QeA0Glcnn35B?p=preview
It turns out that I need to push my $parser and $formatter function only once and watch for changes from outside, then trigger a "re-parse" or "re-format":
scope.$watch("[convertFrom, convertTo]", function(n) {
ngModel.$modelValue = '';
});
I'm actually not sure how to ask this question, and I'm probably using incorrect terms, so bear with me.
Angular sets up a 2-way data binding so that it makes it easy to work with the data on both sides. But what if I want to change how that data is represented?
Let me give a concrete example.
I want a form with a checkbox, which if bound directly to a model, would be stored as true or false by Angular. However, in another part of the webpage I want that value to show up as 0 or 1, not true or false.
Now sure I could go and make them use two different variables, and use ng-change or something like that to update one based on the other, but that seems overkill and convoluted.
Is there some special meta function or something I can define that lets me essentially translate the data as it goes back and forth?
Use the ngTrueValue and ngFalseValue directives. They define what should be treated as true and false on a checkbox: https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D
Example:
<input type="checkbox" ng-model="foo"
ng-true-value="OK"
ng-false-value="BOO-HOO">
The model will either have a value of "OK" or "BOO-HOO" instead of the default true and false in the above example.
Alternatively, if you want the original model to retain its default values and only draw the custom ones from another variable, you could also use the ngChange directive:
<input type="checkbox" ng-model="foo"
ng-change="bar=foo&&'OK'||'BOO-HOO'">
Now, whenever foo changes, bar will have the corresponding alternative value. Just remember to assign bar an initial value (it will start out with no value at all).
in your controller...
$scope.getvalue(data)
{
if(data===true)
return 1; // write what ever you want...
return 0;
}
in your html page..
bind the normal one as {{$scope.data1}} and other as {{getvalue($scope.data1)}}
You can do some nice things with ngBind:
Check this plunker: http://plnkr.co/edit/cRhLN2p5N4PmI65ps6Gp?p=preview
<input type="checkbox" ng-model="ok"> OK?
<h2>true or false: {{ ok }}</h2>
<h2>0 or 1: {{ ok ? 1 : 0 }}</h2>
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