Form response is slow when typing in input

Ionic Framework ionic-v3
1

I have a form and no matter what I tried I couldn’t find out why it’s laggy!

the component that consists of this form has many children in a structure that the component itself as a skeleton and the children as bone

each child component has ngOnChanges and couple or more parameters passed to it.

I have only one form that responds slow and the rest are fine among the child components, not sure what causes this problem

this is a timeline of the laggy form:

image

and this of the other forms:

image

the laggy form has no major functions or what so ever, it contains only 12 input fields with only 3 as required and only a length constraint.

the only difference between the laggy form and the others is the following:

In parent html:

<child-that-has-laggyForm></child-that-has-laggyForm> —> one parameter, one update event passed, the child component ngOnChanges displays data and has a function that creates a modal for the form (the laggy form)

<child-with-no-lagging-form></child-with-no-lagging-form>
Heavier than the previous, more than 2 parameters passed, no update events. has many functions: 1 opens modal form , one redirects to another component then from there to the form.

this is the best I can explain, need your help guys, thanx

2

I suspect ngOnChanges, especially if it does anything modifying state. Try eliminating it and see if it makes a difference.

1 Like
3

yup, it seems your right… I commented out the whole ngOnChanges and opened the form , it responses fine now… I also noticed that the structure I am following I am only able to display data using ngOnChanges which executes more than its required… is there a better way to handle this performance wise, or is this fine ? not to forget to mention , all the other children components has ngOnChanges as well

4

Yes. Generally speaking, either two-way binding with ngModel or binding to a FormControl using Angular’s reactive forms.