Dear all,
I have created several forms in this app but this specific form is autopopulated with data from the database and at the same time, some fields are supposed to be looped over, still with data from the database. Originally, the form was not dynamic, but even with more than 10 items, it would load very fast and operate well, but now that the fields are iterated, even if its only one field, it loads well but when I try to scroll, it takes 5 seconds to scroll down, I can’t even type in the input. I’ve been going over this for several days but I’m getting nowhere. Kindly help:
FORM HTML
<tbody class="seizure_item" [formGroupName]="i" *ngFor="let med of entry.controls.medication.value; let i = index">
<tr>
<td rowspan="4"><ion-textarea readonly value="{{med.medicine}}" formControlName="medicine_var" placeholder="Medication..."></ion-textarea></td>
<td><ion-input readonly value="{{med.hour_1}}" formControlName="hour_1_var" placeholder="Hour" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][1]}}" formControlName="medicalfg_1" placeholder="1" [class]="one" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][2]}}" formControlName="medicalfg_2" placeholder="2" [class]="two" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][3]}}" formControlName="medicalfg_3" placeholder="3" [class]="three" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][4]}}" formControlName="medicalfg_4" placeholder="4" [class]="four" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][5]}}" formControlName="medicalfg_5" placeholder="5" [class]="five" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][6]}}" formControlName="medicalfg_6" placeholder="6" [class]="six" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][7]}}" formControlName="medicalfg_7" placeholder="7" [class]="seven" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][8]}}" formControlName="medicalfg_8" placeholder="8" [class]="eight" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][9]}}" formControlName="medicalfg_9" placeholder="9" [class]="nine" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][10]}}" formControlName="medicalfg_10" placeholder="10" [class]="ten" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][11]}}" formControlName="medicalfg_11" placeholder="11" [class]="eleven" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][12]}}" formControlName="medicalfg_12" placeholder="12" [class]="twelve" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][13]}}" formControlName="medicalfg_13" placeholder="13" [class]="thirteen" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][14]}}" formControlName="medicalfg_14" placeholder="14" [class]="fourteen" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][15]}}" formControlName="medicalfg_15" placeholder="15" [class]="fifteen" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][16]}}" formControlName="medicalfg_16" placeholder="16" [class]="sixteen" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][17]}}" formControlName="medicalfg_17" placeholder="17" [class]="seventeen" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][18]}}" formControlName="medicalfg_18" placeholder="18" [class]="eighteen" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][19]}}" formControlName="medicalfg_19" placeholder="19" [class]="nineteen" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][20]}}" formControlName="medicalfg_20" placeholder="20" [class]="twenty" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][21]}}" formControlName="medicalfg_21" placeholder="21" [class]="twentyOne" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][22]}}" formControlName="medicalfg_22" placeholder="22" [class]="twentyTwo" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][23]}}" formControlName="medicalfg_23" placeholder="23" [class]="twentyThree" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][24]}}" formControlName="medicalfg_24" placeholder="24" [class]="twentyFour" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][25]}}" formControlName="medicalfg_25" placeholder="25" [class]="twentyFive" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][26]}}" formControlName="medicalfg_26" placeholder="26" [class]="twentySix" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][27]}}" formControlName="medicalfg_27" placeholder="27" [class]="twentySeven" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][28]}}" formControlName="medicalfg_28" placeholder="28" [class]="twentyEight" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][29]}}" formControlName="medicalfg_29" placeholder="29" [class]="twentyNine" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][30]}}" formControlName="medicalfg_30" placeholder="30" [class]="thirty" autocomplete="true" autocorrect="on"></ion-input></td>
<td><ion-input value="{{recordData[40][0][31]}}" formControlName="medicalfg_31" placeholder="31" [class]="thirtyOne" autocomplete="true" autocorrect="on"></ion-input></td>
</tr>
..ETC
`
The above part is the one that causes sluggish operation and when data is iterated into it even if its of length 1, it won’t allow me to type into the inputs, but it will iterate well, showing data in boxes where its supposed to be.
Here is ts CODE responsible for this part:
// THIS CODE IS IN HE CONSTRUCTOR
this.entry = this.formBuilder.group({
medication: this.formBuilder.array([]),
seizures: this.formBuilder.array([this.createItem()]),
bowel_movement: this.formBuilder.array([this.createBowel()]),
individual_id: ['', Validators.required],
first_name: ['', Validators.required],
last_name: ['', Validators.required],
facility_name: ['', Validators.required],
month: ['', Validators.required],
year: ['', Validators.required],
diagnosis: [''],
diet: [''],
precautions: [''],
allergies: [''],
physician_name: [''],
physician_number: [''],
name_one: [''],
name_two: [''],
record_number: [''],
dob_resident: [''],
sex: [''],
bp1_systolic_1: [''],
bp1_systolic_2: [''],
bp1_systolic_3: [''],
bp1_systolic_4: [''],
bp1_systolic_5: [''],
bp1_systolic_6: [''],
bp1_systolic_7: [''],
bp1_systolic_8: [''],
bp1_systolic_9: [''],
bp1_systolic_10: [''],
bp1_systolic_11: [''],
bp1_systolic_12: [''],
bp1_systolic_13: [''],
bp1_systolic_14: [''],
bp1_systolic_15: [''],
bp1_systolic_16: [''],
bp1_systolic_17: [''],
bp1_systolic_18: [''],
bp1_systolic_19: [''],
bp1_systolic_20: [''],
bp1_systolic_21: [''],
bp1_systolic_22: [''],
bp1_systolic_23: [''],
bp1_systolic_24: [''],
bp1_systolic_25: [''],
bp1_systolic_26: [''],
bp1_systolic_27: [''],
bp1_systolic_28: [''],
bp1_systolic_29: [''],
bp1_systolic_30: [''],
bp1_systolic_31: [''],
bp1_diastolic_1: [''],
bp1_diastolic_2: [''],
bp1_diastolic_3: [''],
bp1_diastolic_4: [''],
bp1_diastolic_5: [''],
bp1_diastolic_6: [''],
bp1_diastolic_7: [''],
bp1_diastolic_8: [''],
bp1_diastolic_9: [''],
bp1_diastolic_10: [''],
bp1_diastolic_11: [''],
bp1_diastolic_12: [''],
bp1_diastolic_13: [''],
bp1_diastolic_14: [''],
bp1_diastolic_15: [''],
bp1_diastolic_16: [''],
bp1_diastolic_17: [''],
bp1_diastolic_18: [''],
bp1_diastolic_19: [''],
bp1_diastolic_20: [''],
bp1_diastolic_21: [''],
bp1_diastolic_22: [''],
bp1_diastolic_23: [''],
bp1_diastolic_24: [''],
bp1_diastolic_25: [''],
bp1_diastolic_26: [''],
bp1_diastolic_27: [''],
bp1_diastolic_28: [''],
bp1_diastolic_29: [''],
bp1_diastolic_30: [''],
bp1_diastolic_31: [''],
pulse_1: [''],
pulse_2: [''],
pulse_3: [''],
pulse_4: [''],
pulse_5: [''],
pulse_6: [''],
pulse_7: [''],
pulse_8: [''],
pulse_9: [''],
pulse_10: [''],
pulse_11: [''],
pulse_12: [''],
pulse_13: [''],
pulse_14: [''],
pulse_15: [''],
pulse_16: [''],
pulse_17: [''],
pulse_18: [''],
pulse_19: [''],
pulse_20: [''],
pulse_21: [''],
pulse_22: [''],
pulse_23: [''],
pulse_24: [''],
pulse_25: [''],
pulse_26: [''],
pulse_27: [''],
pulse_28: [''],
pulse_29: [''],
pulse_30: [''],
pulse_31: [''],
bp2_systolic_1: [''],
bp2_systolic_2: [''],
bp2_systolic_3: [''],
bp2_systolic_4: [''],
bp2_systolic_5: [''],
bp2_systolic_6: [''],
bp2_systolic_7: [''],
bp2_systolic_8: [''],
bp2_systolic_9: [''],
bp2_systolic_10: [''],
bp2_systolic_11: [''],
bp2_systolic_12: [''],
bp2_systolic_13: [''],
bp2_systolic_14: [''],
bp2_systolic_15: [''],
bp2_systolic_16: [''],
bp2_systolic_17: [''],
bp2_systolic_18: [''],
bp2_systolic_19: [''],
bp2_systolic_20: [''],
bp2_systolic_21: [''],
bp2_systolic_22: [''],
bp2_systolic_23: [''],
bp2_systolic_24: [''],
bp2_systolic_25: [''],
bp2_systolic_26: [''],
bp2_systolic_27: [''],
bp2_systolic_28: [''],
bp2_systolic_29: [''],
bp2_systolic_30: [''],
bp2_systolic_31: [''],
bp2_diastolic_1: [''],
bp2_diastolic_2: [''],
bp2_diastolic_3: [''],
bp2_diastolic_4: [''],
bp2_diastolic_5: [''],
bp2_diastolic_6: [''],
bp2_diastolic_7: [''],
bp2_diastolic_8: [''],
bp2_diastolic_9: [''],
bp2_diastolic_10: [''],
bp2_diastolic_11: [''],
bp2_diastolic_12: [''],
bp2_diastolic_13: [''],
bp2_diastolic_14: [''],
bp2_diastolic_15: [''],
bp2_diastolic_16: [''],
bp2_diastolic_17: [''],
bp2_diastolic_18: [''],
bp2_diastolic_19: [''],
bp2_diastolic_20: [''],
bp2_diastolic_21: [''],
bp2_diastolic_22: [''],
bp2_diastolic_23: [''],
bp2_diastolic_24: [''],
bp2_diastolic_25: [''],
bp2_diastolic_26: [''],
bp2_diastolic_27: [''],
bp2_diastolic_28: [''],
bp2_diastolic_29: [''],
bp2_diastolic_30: [''],
bp2_diastolic_31: [''],
prn_1: [''],
prn_2: [''],
prn_3: [''],
prn_4: [''],
prn_5: [''],
prn_6: [''],
prn_7: [''],
prn_8: [''],
year_2: ['', Validators.required],
staff: ['', Validators.required],
month_2: ['', Validators.required],
});
this.createMedicalRecords();
Function outside the constructor
createMedicalRecords() {
let formID = 44;
let date = "";
let key = "6";
let paging = "100";
let residentID = this.residentData[23];
let user = this.user;
this.loading = this.loadingCtrl.create({content:"Finding Medication for client..."});
this.loading.present();
this.mainProvider.searchEntries(user, formID, residentID, key, date, paging)
.subscribe(data => {
this.mardetails = data;
const arr = Object.keys(this.mardetails).map((key) => [key, this.mardetails[key]]);
this.mardetails = arr[1][1];
this.current_med = <FormArray>this.entry.controls.medication;
this.loading.dismiss();
for(var i = 0; i < this.mardetails.length; i++){
let record = this.mardetails[i];
let newRec = this.formBuilder.group({
medicine: record[9],
start_date: record[12],
stop_date: record[13],
hour_1: record[14],
hour_2: record[15],
hour_3: record[16],
hour_4: record[18],
physician_name: record[4],
physician_number: record[5],
medicine_var: 'medicine' + i,
hour_1_var : 'hour_1_' + i,
hour_2_var : 'hour_2_' + i,
hour_3_var : 'hour_3_' + i,
hour_4_var : 'hour_4_' + i,
medicalfg_1: [''],
medicalfg_2: [''],
medicalfg_3: [''],
medicalfg_4: [''],
medicalfg_5: [''],
medicalfg_6: [''],
medicalfg_7: [''],
medicalfg_8: [''],
medicalfg_9: [''],
medicalfg_10: [''],
medicalfg_11: [''],
medicalfg_12: [''],
medicalfg_13: [''],
medicalfg_14: [''],
medicalfg_15: [''],
medicalfg_16: [''],
medicalfg_17: [''],
medicalfg_18: [''],
medicalfg_19: [''],
medicalfg_20: [''],
medicalfg_21: [''],
medicalfg_22: [''],
medicalfg_23: [''],
medicalfg_24: [''],
medicalfg_25: [''],
medicalfg_26: [''],
medicalfg_27: [''],
medicalfg_28: [''],
medicalfg_29: [''],
medicalfg_30: [''],
medicalfg_31: [''],
medicalfg_1_2: [''],
medicalfg_2_2: [''],
medicalfg_3_2: [''],
medicalfg_4_2: [''],
medicalfg_5_2: [''],
medicalfg_6_2: [''],
medicalfg_7_2: [''],
medicalfg_8_2: [''],
medicalfg_9_2: [''],
medicalfg_10_2: [''],
medicalfg_11_2: [''],
medicalfg_12_2: [''],
medicalfg_13_2: [''],
medicalfg_14_2: [''],
medicalfg_15_2: [''],
medicalfg_16_2: [''],
medicalfg_17_2: [''],
medicalfg_18_2: [''],
medicalfg_19_2: [''],
medicalfg_20_2: [''],
medicalfg_21_2: [''],
medicalfg_22_2: [''],
medicalfg_23_2: [''],
medicalfg_24_2: [''],
medicalfg_25_2: [''],
medicalfg_26_2: [''],
medicalfg_27_2: [''],
medicalfg_28_2: [''],
medicalfg_29_2: [''],
medicalfg_30_2: [''],
medicalfg_31_2: [''],
medicalfg_1_3: [''],
medicalfg_2_3: [''],
medicalfg_3_3: [''],
medicalfg_4_3: [''],
medicalfg_5_3: [''],
medicalfg_6_3: [''],
medicalfg_7_3: [''],
medicalfg_8_3: [''],
medicalfg_9_3: [''],
medicalfg_10_3: [''],
medicalfg_11_3: [''],
medicalfg_12_3: [''],
medicalfg_13_3: [''],
medicalfg_14_3: [''],
medicalfg_15_3: [''],
medicalfg_16_3: [''],
medicalfg_17_3: [''],
medicalfg_18_3: [''],
medicalfg_19_3: [''],
medicalfg_20_3: [''],
medicalfg_21_3: [''],
medicalfg_22_3: [''],
medicalfg_23_3: [''],
medicalfg_24_3: [''],
medicalfg_25_3: [''],
medicalfg_26_3: [''],
medicalfg_27_3: [''],
medicalfg_28_3: [''],
medicalfg_29_3: [''],
medicalfg_30_3: [''],
medicalfg_31_3: [''],
medicalfg_1_4: [''],
medicalfg_2_4: [''],
medicalfg_3_4: [''],
medicalfg_4_4: [''],
medicalfg_5_4: [''],
medicalfg_6_4: [''],
medicalfg_7_4: [''],
medicalfg_8_4: [''],
medicalfg_9_4: [''],
medicalfg_10_4: [''],
medicalfg_11_4: [''],
medicalfg_12_4: [''],
medicalfg_13_4: [''],
medicalfg_14_4: [''],
medicalfg_15_4: [''],
medicalfg_16_4: [''],
medicalfg_17_4: [''],
medicalfg_18_4: [''],
medicalfg_19_4: [''],
medicalfg_20_4: [''],
medicalfg_21_4: [''],
medicalfg_22_4: [''],
medicalfg_23_4: [''],
medicalfg_24_4: [''],
medicalfg_25_4: [''],
medicalfg_26_4: [''],
medicalfg_27_4: [''],
medicalfg_28_4: [''],
medicalfg_29_4: [''],
medicalfg_30_4: [''],
medicalfg_31_4: [''],
});
this.current_med.push(newRec);
}
});
}
Furthermore, when you check the DevTools in chrome, the iterated <tbody> tags are blinking in purple continuously all the time. Does it mean some function or event is running all the time that causes the form to become sluggish?
HERE:
What could I be doing wrong that’s placing too much load on the form that it can’t even scroll until after several seconds, and can’t allow me to type?
Thank you for your help in advance!!
