Reading Ion Grid Data


#1

Hi Team,

I need small idea on ion-grid

after reading the entire component of ion-grid, i designed it but while trying to save data i couldn’t able to get idea of how to read ion-grid all rows at once.

i’ve found other ways of reading them… but on clicking of one button which is outside of ion-grid

can i read all rows at once and build Json Object?


#2

ion-grid is purely for laying things out. It does not contain anything to read.


#3

Ok fine then, how to capture the entire data entered in the ion-grid
i’ve 4 columns in which one is month and other is Date and the next column is a dropdown and last column is textbox, so after user enters data particular number of rows i need to prepare a Json Object.

So is it not possible on a single click


#4

Use FormArray of FormGroups for each row.

import { FormBuilder, FormArray } from '@angular/forms';
...
export class AppComponent {
  public form: FormArray;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.array([]);
    this.addRow();
  }

  private addRow() {
    this.form.push(
      this.fb.group({
        month: [''],
        date: [''],
        text: [''],
        dropDown: ['']
      })
    );
  }
}

Then change your template to iterate over this form

<ion-grid>
    <ion-row *ngFor="let row of form.controls" [formGroup]="row">
        <ion-col>
          <input type="text" formControlName="date">
        </ion-col>
        <ion-col>
          <input type="text" formControlName="month">
        </ion-col>
        <ion-col>
          <input type="text" formControlName="text">
        </ion-col>
        <ion-col>
          <select formControlName="dropDown">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">2</option>
          </select>
        </ion-col>
    </ion-row>
</ion-grid>