Get values checkbox ionic 3

Ionic Framework ionic-v3
1

I have a list checkbox and a text area in my page, well how to work with FormBuilder, Group and Validarors and how to get the values of checkbox ?

modalPage.ts

<form [formGroup]="dump" (ngSubmit)="createWaste()">
      <ion-item *ngFor="let waste of typeWaste">
        <ion-label>{{ waste.name }}</ion-label>
        <ion-checkbox color="dark" formControlName="waste" checked="true"></ion-checkbox>
      </ion-item>

  ...
      <textarea #myInput id="myInput" rows="1" maxLength="500" (keyup)="resize()" formControlName="description" placeholder="Digite o seu texto aqui"></textarea>
  ...

      <button type="submit" ion-button block [disabled]="!dump.valid">Despejar</button>
    </form>

In my component I have the following code

  constructor(public viewCtrl: ViewController, private formB: FormBuilder, private service: EvictionsProvider) {
    this.getWaste();
    this.getForm();
  }
  getWaste() {
    this.typeWaste = [
      { id: 1, name: 'Vidro', selected: true },
      { id: 2, name: 'Papel', selected: true },
      { id: 3, name: 'Ferro', selected: true },
      { id: 4, name: 'Vidro', selected: true },
      { id: 5, name: 'Vidro', selected: true },
      { id: 6, name: 'Vidro', selected: true },
    ]
  }

here I get the data of form

getForm() {
    this.dump = this.formB.group({
      waste: ['', Validators.required],
      description: [''],
    });
  }

createWaste() {
  .....
}
2

Hi, You can get the form field’s values using this.dump.values

1 Like
3

Thanks friend, but I tested now and the result was “{waste: true, description: “”}”, in my case I take “dump.value”

4

Well I done with success

typeWaste: any[];
wasteChecked: any[];
dump: FormGroup;

  constructor(private formB: FormBuilder, private service: EvictionsProvider) {
    this.getWaste();
    this.wasteChecked = [];
    this.getForm();
  }

Initialize the the data in checkbox

  getWaste() {
    this.typeWaste = [
      { id: 1, name: 'Vidro' },
      { id: 2, name: 'Papel' },
      ......
    ]
  }

Now I get the all velues in form in view

  getForm() {
    this.dump = this.formB.group({ 
      waste: ['false', Validators.required],
      description: [''],
    });
  }

this methodo verify if the checkbox it checked and get the values that I want
if item to be checked then I add item in a new array

  selectWaste(waste, ev) {
    if(ev.value) {
        this.wasteChecked.push(waste)
    }
  }

in my case I created a method to handle my dada

  setDump() {
    let dump = {
      dump: this.wasteChecked,
      description: this.dump.value.description.toUpperCase(),
      status: 1, 
      created_at: this.today
    }
    return dump;
  }

so I save all data in DB

  createWaste() {
    // this.service.save(this.setDump())
    //     .then(() => {
    //       alert('salvo com sucesso')
    //     })
    console.log(this.setDump())
  }

in html I have

  <form [formGroup]="dump" (ngSubmit)="createWaste()">

      <ion-item *ngFor="let waste of typeWaste">
        <ion-label>{{ waste.name }}</ion-label>
        <ion-checkbox color="dark" formControlName="waste" (ionChange)="selectWaste(waste.name, $event)"></ion-checkbox>
      </ion-item>

      <ion-row>
        <h5 text-center>Escreva aqui alguma observação</h5>
        <ion-col col-12>
          <ion-item>
            <textarea #myInput id="myInput" rows="1" maxLength="500" formControlName="description" placeholder="Digite o seu texto aqui"></textarea>
          </ion-item>
        </ion-col>
      </ion-row>

      <button type="submit" ion-button block [disabled]="!dump.valid">Despejar</button>
    </form>
1 Like
5

I tried this code but it only returns true or false instead of the name checked

6

If you to get by formControlName yes, you get boolean, but I created this method

setDump() {
    let dump = {
      dump: this.wasteChecked,
      description: this.dump.value.description.toUpperCase(),
      status: 1, 
      created_at: this.today
    }
    return dump;
  }

if you observable, I have a array this.wastedChecked that get a object
and in

<ion-checkbox color="dark" formControlName="waste" (ionChange)="selectWaste(waste.name, $event)"></ion-checkbox>

I have the event ionChange for get a object of item understand ?

1 Like
7

Something strange is happening with me :frowning:
If I press 5 times on same checkbox its giving me the output 5 times with same value same happens no matter how much time i click the checkbox :open_mouth:
How can i restrict it to no matter how many times the user click i get whatever the value is selected at the time of submitting the button?