How to apply a function to the button that will only proceed with checkbox set

Asked

Viewed 22 times

0

I have a term-of-service display screen. My doubt and how can I apply a method in the button "query" which, only when the checkbox is set the user can proceed.

<ion-header [translucent]="true">
  <ion-toolbar padding-horizontal color="primary">
    <ion-buttons slot="start">
      <ion-back-button [text]="'Voltar'" defaultHref="/app"></ion-back-button>
    </ion-buttons>
    <ion-title >Certidão</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <div padding-horizontal text-center class="animated fadeInDown ion-text-center">
    <ion-text color="primary">
      <h1>Termos de Serviços</h1>
    </ion-text>
  </div>

  <ion-card *ngFor="let texto of termo">
    <div class="col">
      <h1>Teste</h1>
    </div>
    {{texto.termo}}
  </ion-card>

  <ion-item lines="none">
    <ion-checkbox color="primary" slot="start"></ion-checkbox>
    <ion-label>Li e Concordo</ion-label>
  </ion-item>

  <div style="margin-bottom: 15px">
    <ion-row>
      <ion-col size="2"></ion-col>
      <ion-col size="8">
        <ion-button expand="block" color="secondary" >
          Consultar
        </ion-button>
      </ion-col>
      <ion-col size="2"></ion-col>
    </ion-row>
  </div>


</ion-content>

import { Component, OnInit } from '@angular/core';
import { Termo } from 'src/app/models/certidao.model';
import { CertidaoService } from 'src/app/services/certidao/certidao.service';

@Component({
  selector: 'app-certidao',
  templateUrl: './certidao.page.html',
  styleUrls: ['./certidao.page.scss'],
})
export class CertidaoPage implements OnInit {

  termo: Termo[] | undefined;

  public form = [
    { val: 'Pepperoni', isChecked: true },
    { val: 'Sausage', isChecked: false },
    { val: 'Mushroom', isChecked: false }
  ];

  constructor(private certidaoService: CertidaoService) { }

  ngOnInit(): void {
    this.certidaoService.getTermo()
      .subscribe(res => this.termo = res);
      console.log("Aqui", this.termo);
      
  }

}
angular ionic

1 answer

0

You can create using the Validators#requiredTrue:

Component:

this.formGroup = this.formBuilder.group({
  isCheckedTerm: [false, Validators.requiredTrue]
});

Template Checkbox:

<ion-item lines="none">
  <ion-checkbox formControlname='isCheckedTerm' color="primary" slot="start"></ion-checkbox>
  <ion-label>Li e Concordo</ion-label>
</ion-item>

Submit Template

<div style="margin-bottom: 15px">
  <ion-row>
    <ion-col size="2"></ion-col>
    <ion-col size="8">
      <ion-button [disabled]="formGroup.invalid" expand="block" color="secondary">
        Consultar
      </ion-button>
    </ion-col>
    <ion-col size="2"></ion-col>
  </ion-row>
</div>

Browser other questions tagged angular ionic

You are not signed in. Login or sign up in order to post.