[BUG] Unable to refresh the screen after making form read-only after submit the form.

[yarabsyp]

Environment

Please provide as many details as you can:

• Hosting type
  • Form.io
  • Local deployment
    • Version:
• Formio.js version:5.0.0
• Frontend framework: Angular
• Browser: chrome
• Browser version:

Steps to Reproduce

1. create a form and create a submit button
2. enter the data into the form
3. Click on submit button

Expected behavior

form should need to be read only with the given data

Observed behavior

form is still editable , form is not changing to read only

Code in Ts

onSubmit(value: any) {
console.log('onSubmit');
console.log(value);
this.readOnly = true;

this.formio.formioReady.then(() => {
  this.formio.formio.disabled = true;
  this.formio.formio.components.forEach((comp: any) => comp.disabled = true);
  this.formio.formio.viewOnly = true;
});

this.submissionDone.emit(true);

}

in HTML

<formio [form]="form"
[submitDone]="submissionDone"
[readOnly]="readOnly"
(render)="onRender()"
[refresh]="refreshForm"
(submit)="onSubmit($event)"
(change)="onChange($event)" #formio

Example

If possible, please provide a screenshot, live example (via JSFiddle or similar), and/or example code to help demonstrate the issue.

For code or form JSON, please enclose in a code block:

// your code here

[lane-formio]

Could you possibly provide a code sandbox and/or video to help us reproduce the issue?