How to assign values in dictionary from form group through looping?

Question

I am developing a mobile application that send a request to REST api, however, the data needed to pass must be in dictionary format. Thus, I came up with constructing an empty dictionary format like this;

my_dict= { key_1: '', key_2: '', key_3: '', key_4: '', key_5: '', key_6: ''};

And I'm adding value to each corresponding key by:

this.my_dict.key_1= this.my_form.value.value_1;
this.my_dict.key_2= this.my_form.value.value_2;
this.my_dict.key_3= this.my_form.value.value_3;
this.my_dict.key_4= this.my_form.value.value_4;
this.my_dict.key_5= this.my_form.value.value_5;
this.my_dict.key_6= this.my_form.value.value_6;

The value that I am assigning to are from FormGroup. I access each FormControl through this.<form>.value.<form_control_name>. Example: this.my_form.value.value_1

What I'm trying to do now is to find the most efficient way of storing values in dictionary just like by using for loop. Anyone know how to convert my code in a for loop way?

This is the entire form

<!-- Transportation Form -->
      <form [formGroup]="transpo_form" #f="ngForm">

        <!-- Form Item 1 (Description) -->
        <ion-item>
          <ion-input placeholder="Description (Optional)" type="text" formControlName="description" clearInput></ion-input>
        </ion-item>

        <!-- Form Item 2 (Location) -->
        <ion-item>
          <ion-input placeholder="Location" formControlName="location" required clearInput ></ion-input>
        </ion-item>
        <!-- Throw an error if field is invalid -->
        <div *ngIf="!transpo_form.controls.location.valid  && (transpo_form.controls.location.dirty || submit_attempt)" class="validator-error">
          * This field is required
        </div>

        <!-- Form Item 3 (Vehicle Type) -->
        <ion-item>
            <ion-label>Vehicle Type</ion-label>
            <ion-select value="notifications" interface="action-sheet" formControlName="vehicle" required>
              <ion-select-option>Tricycle</ion-select-option>
              <ion-select-option>Bus</ion-select-option>
              <ion-select-option selected>Jeepney</ion-select-option>
              <ion-select-option>Taxi</ion-select-option>
              <ion-select-option>Tricycle</ion-select-option>
              <ion-select-option>Train</ion-select-option>
            </ion-select>
        </ion-item>
        <!-- Throw an error if field is invalid -->
        <div *ngIf="!transpo_form.controls.vehicle.valid  && (transpo_form.controls.vehicle.dirty || submit_attempt)" class="validator-error">
          * This field is required
        </div>
        <ion-item-divider></ion-item-divider>
        <ion-item>
          <ion-label>Arrival Date</ion-label>
          <ion-datetime placeholder="Select Date" formControlName="arrival_date" required></ion-datetime>
        </ion-item>
        <div *ngIf="!transpo_form.controls.arrival_date.valid  && (transpo_form.controls.arrival_date.dirty || submit_attempt)" class="validator-error">
            * This field is required
        </div>
        <ion-item>
          <ion-label>Arrival Time</ion-label>
          <ion-datetime display-format="h:mm A" picker-format="h:mm A" placeholder="Select Time" formControlName="arrival_time" required></ion-datetime>
        </ion-item>
        <div *ngIf="!transpo_form.controls.arrival_time.valid  && (transpo_form.controls.arrival_time.dirty || submit_attempt)" class="validator-error">
            * This field is required
        </div>
        <ion-item>
            <ion-input type="number" placeholder="Cost" formControlName="cost" required></ion-input>
        </ion-item>
        <div *ngIf="!transpo_form.controls.cost.valid  && (transpo_form.controls.cost.dirty || submit_attempt)" class="validator-error">
            * This field is required
        </div>
        <div class="submit-button">
            <ion-button color="success" expand="block" (click)="submit()">Add to my expenses</ion-button>
        </div>
      </form>

Note: Sorry for noob question because I'm actually new to Ionic 4 with AngularJS as backend and I can't find a useful tutorial for this.

you should bind your form fields to angularjs models, show us the form, maybe we can help. — jomsk1e, Oct 22 '19 at 02:30
I try to use ngmodels to ion input tag in my form but I always seeing this error Can't bind to 'ngModel' since it isn't a known property of 'input' — King, Oct 22 '19 at 02:35
Also, I already added the FormsModule in my app.component.ts as well as on the page component that I'm working on. — King, Oct 22 '19 at 02:36
this should give you a headstart: https://stackoverflow.com/a/38896469/1638261 — jomsk1e, Oct 22 '19 at 02:39
I already follow all the answer stated there but no one work for me. — King, Oct 22 '19 at 02:43

How to assign values in dictionary from form group through looping?

0 Answers0