How do I save ionic 4 question data inside of sqlite db using ionic storage?

Question

What I do is pull the the basic question data from sqlite using this code.

ts

openKeyValueTEST(value: string) {
  this.storage.get(value).then((val) => {
    this.auditTwoResults = JSON.parse(val);
    this.auditTwo = this.auditTwoResults.compliantTest;
    this.formNameTwo = value;
  });
}

The

this.formNameTwo = value

is this,

  "compliantTest": [
    { 
      questionnum: '1', 
      question: 'Some question', 
      text_name: 'text1', 
      radio_name: 'rad1', 
      select_name: 'sel1',  
      id: 'id1' 
    },
    { 
      questionnum: '2', 
      question: 'question again?', 
      text_name: 'text2', 
      radio_name: 'rad2', 
      select_name: 'sel2', 
      id: 'id2' }
  ],

What I am trying to accomplish is making my form persistent. The user may be out of cell coverage or take a day or two to fill out the form. If possible i would like to to overwrite the

this.formNameTwo

to include the filled out form data.

My form data will consist of text, radio buttons, and select. Below is an example of my form. When I can I will be placing a bounty on this question.

      <ion-card-content>
        <div class="question">
            {{ item.question }}
        </div>

        <ion-radio-group  name="{{item.radio_name}}">         
          <ion-row class="radio-tags">
            <ion-item class="radio-tag" lines="none">
              <ion-label class="tag-label">compliant</ion-label>
              <ion-radio value="compliant" (click)="closeSelect(i)"></ion-radio>
            </ion-item>
            <ion-item class="radio-tagtwo" lines="none">
              <ion-label class="tag-label">non-compliant</ion-label>
              <ion-radio value="non-compliant" (click)="openSelect(i)"></ion-radio>
            </ion-item>
          </ion-row>
        </ion-radio-group>

        <div *ngIf="show[i]">
          <div>
            <ion-item >
              <ion-label position="floating">Findings Title</ion-label>
              <ion-textarea name="{{item.text_name}}"></ion-textarea>
            </ion-item>

            <ion-item>
              <ion-label class="ion-text-wrap">Company or Contractor</ion-label>
              <ion-select placeholder="Select" name="{{item.select_name}}">
                <ion-select-option value="1">1</ion-select-option>
                <ion-select-option value="2">2</ion-select-option>
              </ion-select>
            </ion-item>
          </div>
        </div>
      </ion-card-content>

Thomas Degroot · Accepted Answer · 2019-10-04 19:43:39Z

First Thing open the form with this

openSavedForm(value: string) {
  this.storage.get(value).then((val) => {
    this.auditResults = JSON.parse(val);
    this.audit = this.auditResults;
    this.formInfo = value;
  });
}

The second thing I had to do was ensure my ngModels had unique names in the ion-list *ngFor

    <ion-list>
        <ion-card *ngFor="let item of audit; let i=index;">
            <ion-radio-group name="{{item.radio_compliant_name}}" [(ngModel)]="audit[i].radio_compliant_input">         
                <ion-row class="radio-tags">
                <ion-item class="radio-tag" lines="none">
                    <ion-label class="tag-label">compliant</ion-label>
                    <ion-radio value="compliant" (click)="openCompliantNA(i) ; closeSelect(i)"></ion-radio>
                </ion-item>
                <ion-item class="radio-tagtwo" lines="none">
                    <ion-label class="tag-label">non-compliant</ion-label>
                    <ion-radio value="non-compliant" (click)="openSelect(i) ; closeCompliantNA(i)"></ion-radio>
                </ion-item>
                <ion-item class="radio-tagfive" lines="none">
                    <ion-label class="tag-label">not-applicable</ion-label>
                    <ion-radio value="non-applicable" (click)="openCompliantNA(i) ; closeSelect(i)"></ion-radio>
                </ion-item>
                </ion-row>
            </ion-radio-group>

            <div *ngIf="show[i]">
                <div>
                <ion-item>
                    <ion-label class="ion-text-wrap">Closure Category</ion-label>
                    <ion-select placeholder="Select" name="{{item.select_closurecategory_name}}" [(ngModel)]="audit[i].select_closurecategory_input">
                    <ion-select-option value="Regulatory">Regulatory</ion-select-option>
                    <ion-select-option value="Non-Regulatory">Non-Regulatory</ion-select-option>
                    </ion-select>
                </ion-item>

                <ion-item>
                    <ion-label position="floating" class="ion-text-wrap"><span style="color:red" >* Corrective Actions Describe Action Required *</span></ion-label>
                    <ion-textarea name="{{item.text_corrective_name}}" [(ngModel)]="audit[i].text_corrective_input"></ion-textarea>
                </ion-item>
                </div>
            </div><!--end show-->
            </ion-card-content>
        </ion-card>
    </ion-list>

My saving method is just an overwrite of the key/value pair that i pulled the form from

async saveFormUpdates() {
  this.newAudit =this.audit;
  await this.storage.set( this.formInfo , JSON.stringify(this.newAudit));
}

jens1101 · Accepted Answer · 2019-10-03 10:22:35Z

I'm not exactly sure of your app's internal workings, but my suggestion would be to make use of ngModel.

Here is an example

HTML

<ion-select name="{{item.select_name}}" [(ngModel)]="selectedValue">
  <ion-select-option value="1">1</ion-select-option>
  <ion-select-option value="2">2</ion-select-option>
</ion-select>

TS

openKeyValueTEST(value: string) {
  this.storage.get(value).then((val) => {
    this.auditTwoResults = JSON.parse(val);
    this.auditTwo = this.auditTwoResults.compliantTest;

    // I don't know how the data in your DB is structured, but this will
    // set the value of the select picker in the view.
    this.selectedValue = this.auditTwoResults.selected_value;

    this.formNameTwo = value;
  });
}

The code above will query your storage and then save the result in this.selectedValue. If the selected value is 1 then the first option will be selected. If it's 2 then the second option will be selected.

I encourage you to read the official documentation to learn more about ngModel.

Collectives™ on Stack Overflow

How do I save ionic 4 question data inside of sqlite db using ionic storage?

2 Answers 2

Comments

Here is an example

HTML

TS

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Here is an example

HTML

TS

Comments

Your Answer

Sign up or log in

Post as a guest

Related