ion-toggle ionChange get called multiple times in ionic. I have tried using different techniques to solve it but I am not successful.
Code 1:
<ion-toggle
(ionChange)="changeData()"
color="success"
checked="{{data}}"
>
</ion-toggle>
Problem: When I used code 1 then ionChange get called multiple time and it does not show correct state first time.
Code 2:
<ion-toggle
(ionChange)="changeData()"
color="success"
[(ngModel)]="data"
>
</ion-toggle>
Problem: Code 2 causes infinite loop. It calls ionChange infinitly.
If anybody has faced similar issue and/or anybody knows how to tackle it then please let me know. Thanks
Infinite loop or multiple time calling of a method can be occurs if you are changing the the value of boolean in (ionChange)="changeData()" while you are already using [(ngModel)]="data" which is changing boolean value on toggling. So remove any code in your code which is changing data on ionChange.
I was facing similar problem when i was changing the value of boolean on ionChange while i was already using [(ngModel)].
So remove any code similar to code below in changeData() method:
// remove code which is changing state again
data = !data
I solved in the following way, remove the link from ngModel or checked with some variable. To go back to the previous state I map with the viewChild and control it from there.
Online test link
here
Related
I'm trying to set the color of a label in Angular 2 depending on its email-validation like this:
<input type="email" name="email" [(ngModel)]="email" email #currentEmail="ngModel" [ngClass]="currentEmail.invalid ? 'error' : 'none'">
It works as expected on my page, however in Visual Studio Code I get the following error message:
Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'error'. Current value: 'none'.
So my questions are:
Why does this message show up?
Whats the right approach to do this task?
Why does this message show up?
You can find a good explaination of why in this issue
This is not a bug, it's a feature of dev mode working as intended. Calling enableProdMode( ) - when bootstrapping the app prevents the exception from being thrown.
That said, it's being thrown for good reason: In short, after every round of change detection, dev mode immediately performs a second round to verify that no bindings have changed since the end of the first, as this would indicate that changes are being caused by change detection itself.
In your plunk, you have the binding [attr.spinner]=isLoading, and isLoading changes as a result of your call to this.load(), which occurs when ngAfterViewInit is fired, which happens as a part of the initial change detection turn. That in itself isn't problematic though - the problem is that this.load() changes a binding but does not trigger a new round of change detection, which means that this binding will not be updated until some future round of change detection.
Whats the right approach to do this task?
Simply replace [ngClass] with [class]. I don't know why, but when trying to reproduce your issue in a plunker, I found out that [class] does not trigger the error.
Edit : use ng-invalid class
You can also style your element based on the angular class ng-invalid.
See this plunker
Please see the relevant plunker
https://plnkr.co/edit/f0BxpinhuqVz8o6IIFaL?p=preview
stack overflow makes you put code if a plunker is linked
but it is too much code to copy paste here it would just
look messy so I a am putting this comment instead.
If you run this and then click the add button a new entry is added to the array, but the form view does not reflect the forms state, instead the first entry is duplicated and the last entry is gone.
If anyone has any ideas or guides as to what I am doing wrong I would be very grateful as I have been pretty stuck on a seemingly easy task.
I tried to follow the official Angular Reactive Forms guide as close as possible to build this example.
Seems like Angular has trouble tracking the index of your objects in your formArray. This can be solved by using trackBy. Add it to your iteration with function:
<div *ngFor="let detail of detailArray.controls; let i=index; trackBy:trackByFn" [formGroupName]="i">
and in component:
trackByFn(index: any, item: any) {
return index;
}
Your PLUNKER
i want to disable swap in ion-slide-box so i added this
active-slide="slidestop($index)"
in ionic-slide-box as you can see below
<ion-slide-box show-pager="false" ng-repeat="test in demoQuiz" active-slide="slidestop($index)">
and added this in controller.js
$scope.slidestop = function(index) {
$ionicSlideBoxDelegate.enableSlide(false);
}
but i'm getting this error:(
Error: [$compile:nonassign] Expression 'slidestop($index)' used with directive 'ionSlideBox' is non-assignable!
although this code working fine:)
If you carefully see ionic Docs, you will find that
active-slide is an expression, which represents the Model to bind the current slide to.
You have written a method invocation inside the active-slide attribute, without returning anything from the method.
You can rewrite the stuff like this :
<ion-slide-box show-pager="false" ng-repeat="test in demoQuiz" active-slide="activeSlide">
Then, Inside your controller, you can write
$ionicSlideBoxDelegate.stop()
This will stop ionic slide box until and unless you explicitly change the slides.
More Details here
using Ajax I filled Country, State and city dropdownlist. On land change state is filled and on state change city is filled properly.
Then when I try to save page I face this :Invalid postback or callback argument.
Searched and found out that this is due to change in ddl.selectedvalu change from initial value that is assigned by asp.net.
Now my question is that how can I let asp.net know that the new ddl value is valid?
Thank you.
In many pages it is recommended to use EnableEventValidation="false", but I prefer not to use it.
Some say that use Render and add value to notify .Net like this:
protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
ClientScript.RegisterForEventValidation("ddlLanguages ", "English");
ClientScript.RegisterForEventValidation("ddlLanguages ", "Tamil");
ClientScript.RegisterForEventValidation("ddlLanguages ", "Hindi");
base.Render(writer);
}
but how to use it? where to put it?
for a better understanding I put here a sample code including Database script :
hesab20.com/DownLoad/Ajax.zip
in this sample Javascript is used to fill drop-down list . But when click button is executed and a post back occur, error happen.
Please help if you have experience with this.
Regards.
Please run the sample code and change the drop down lists , automatically the other is filled , meaning that list item text and value is completely changed. finally click button for a post back.
you must see that error happens:
Invalid postback or callback argument. Event validation ....
and note : EnableEventValidation="true"
Thanks
I am using an AJAX Control Toolkit: 'maskededitvalidator' to validate a textboxe's date entry. I am trying to set the minimum value programatically to today's date. I have tried both adding it to the source (and calling Page.DataBind()) or setting it in the code behind and niether work. No error, just the validation does not work. If I change the 'MinimumValue' property to a hardcoded value it works just fine. Any ideas? Thanks!
In the source directly on the control:
MinimumValue='<%# DateTime.Now.Date.ToString %>'
In the server code:
Me.txtDateMEV.MinimumValue = DateTime.Now.ToShortDateString()
I think this is more likely a "calendar" issue than a "maskedit" one.
Maybe you should try some Calendar option just like the example on Calendar Example. Check out the Calendar with date range, it looks like the problem you have.
I was never able to get the binding systax working in the source, but I did get it working in the code behind like below:
Me.txtDateMEV.MinimumValue = DateTime.Now.ToShortDateString()
I had a CSS style which was erasing the current date if it was left blank and did not have a default date set. Once I updated the CSS not to set 'display:none' for the .AJAXCalendar .ajax__calendar_today style, then the code above worked. So half fixed my issue because CSS was preventing the MinimumValue code to apply. However I really wanted to be able to use the binding syntax but I could never get it to work.