Show filled questionnaire - html

Question

i'm creating a mobile app which allow the user to answer some question in a Questionnaire.
When the questionnaire is done, the user save it in LocalStorage.
When he go on the page, the user see all the previous answered questionnaire on buttons.
I would like to show the quesitonnaire previously filled but he can't change any answer.
How can I do that (disable any modifications)?
I'm using Ionic 3.
Here is a code sample of how i create a questionnaire.
<ion-item>
<ion-label>{{ 'PREVISIT_fever_or_infection' | translate }}</ion-label>
<ion-select [(ngModel)]="qObj.feverinfectionlastrelapse" interface="popover">
<ion-option value="yes">Yes</ion-option>
<ion-option value="no" checked>No</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>{{ 'PREVISIT_overheated' | translate }}</ion-label>
<ion-select [(ngModel)]="qObj.overheatedlastrelapse" interface="popover">
<ion-option value="yes">Yes</ion-option>
<ion-option value="no" checked>No</ion-option>
</ion-select>
</ion-item>
<p>{{ 'PREVISIT_symptom_experienced' | translate }}<ion-icon name="add" class="more-icon"></ion-icon> {{ 'PREVISIT_symptom_experienced2' | translate }}</p>
<!-- Symptom list -->
<ion-item *ngFor="let symptom of symptoms">
{{symptom.label | translate}}
<ion-label>{{symptom.label | translate}} <ion-icon name="add" class="more-icon" [hidden]="!symptom.more"></ion-icon></ion-label>
<ion-checkbox [(ngModel)]="symptom.value"></ion-checkbox>
</ion-item>
<!-- more detailed questions list -->
<div *ngFor="let symptom of symptoms">
<h5 *ngIf="symptom.value&&symptom.more" class="more-detailed-questions-spacer">{{symptom.label | translate}}</h5>
<div *ngIf="symptom.value">
<ion-item *ngFor="let question of symptom.moreList">
<ion-label>{{question.name | translate}}</ion-label>
<ion-select [(ngModel)]="question.value" interface="popover">
<ion-option *ngFor="let condition of question.conditions" [value]="condition.value">{{condition.txt}}</ion-option>
</ion-select>
</ion-item>
Here is a screenshot of the questionnaire form.

Answer 1

You can use a Subject of variable type Boolean, and use the same variable to check if the user has loaded the details and disabled the form/elements using [disabled]="yourBoolean"
If you have single form you don't have to go for a Subject, you can just use a boolean variable
this.qObj = JSON.parse(localStorage.getItem('qObj'));
this.readOnly = true;
and
<ion-select [disabled] = "readOnly" [(ngModel)]="qObj.feverinfectionlastrelapse" interface="popover">

Answer 2

You could maintain a readonly state on your questionnaire component,
this.qObj = JSON.parse(localStorage.getItem('qObj'));
this.isReadOnly = typeof qObj !== 'undefined' && qObj !== null
And for your input controls you could assign this variable
<ion-item>
<ion-label>{{ 'PREVISIT_fever_or_infection' | translate }}</ion-label>
<ion-select [disabled] = "isReadOnly" [(ngModel)]="qObj.feverinfectionlastrelapse" interface="popover">
<ion-option value="yes">Yes</ion-option>
<ion-option value="no" checked>No</ion-option>
</ion-select>
</ion-item>
<ion-item *ngFor="let symptom of symptoms">
{{symptom.label | translate}}
<ion-label>{{symptom.label | translate}} <ion-icon name="add" class="more-icon" [hidden]="!symptom.more"></ion-icon></ion-label>
<ion-checkbox [disabled] = "isReadOnly" [(ngModel)]="symptom.value"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label color="primary">Inline Label</ion-label>
<ion-input [readonly]="isReadOnly" placeholder="Text Input"></ion-input>
</ion-item>