Reactive form module is getting time to render in case of edit mode

i am using angular reactive from module to my application here is my html code

<form *ngIf="myForm" [formGroup]="myForm" (submit)="onSubmit()">
<mat-select *ngIf="!option.isMultiple" [formControlName]="option.id">
<mat-option [value]="option.values">
{{ option.values }}
</mat-option>
</mat-select>
</mat-form-field>
</form>


And inside the typescript i am populating the data whatever user was selected

ngOnInit(){
let data = items.map(e=>e.key);
this.form.controls[this.option.id].setValue(data);// this is talking time to render
}


if i am not setting the values inside formcontrol its working fine however if the items length is even 100 its almost stuck for 10 seconds. What is wrong here.

Drop down is able to render 1000 records immediately then why setting formValue is getting stuck i don't see any DOM insertion its just a single statement to set form value.

Continue reading...