El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Validació i Gestió d'Errors

Següent ►
►

En aquest tema, aprendrem com implementar la validació de formularis i gestionar errors en una aplicació Ionic. La validació és crucial per assegurar que les dades introduïdes pels usuaris siguin correctes i compleixin amb els requisits de l'aplicació. La gestió d'errors, per altra banda, ens ajuda a manejar situacions inesperades de manera elegant i informativa.

Continguts

  1. Introducció a la Validació de Formularis
  2. Tipus de Validacions
  3. Implementació de Validacions en Ionic
  4. Gestió d'Errors en Formularis
  5. Exemples Pràctics
  6. Exercicis Pràctics

  1. Introducció a la Validació de Formularis

La validació de formularis és el procés de verificar que les dades introduïdes per l'usuari compleixen amb certs criteris abans de ser processades. Això pot incloure la verificació de camps obligatoris, formats específics (com correus electrònics), longitud mínima i màxima, entre altres.

  1. Tipus de Validacions

Hi ha dos tipus principals de validacions:

  • Validació del Client: Es realitza en el navegador de l'usuari abans d'enviar les dades al servidor. És ràpida i proporciona una bona experiència d'usuari.
  • Validació del Servidor: Es realitza al servidor després que les dades han estat enviades. És més segura, ja que no es pot evitar manipulant el codi del client.

  1. Implementació de Validacions en Ionic

3.1. Configuració del Formulari

Primer, necessitem configurar un formulari en la nostra aplicació Ionic. Utilitzarem Reactive Forms d'Angular per a això.

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-form-validation',
  templateUrl: './form-validation.component.html',
  styleUrls: ['./form-validation.component.scss'],
})
export class FormValidationComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]],
      age: ['', [Validators.required, Validators.min(18)]],
    });
  }

  onSubmit() {
    if (this.myForm.valid) {
      console.log('Form Submitted!', this.myForm.value);
    } else {
      console.log('Form not valid');
    }
  }
}

3.2. Plantilla del Formulari

A continuació, creem la plantilla HTML per al formulari.

<ion-header>
  <ion-toolbar>
    <ion-title>Form Validation</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <ion-item>
      <ion-label position="floating">Name</ion-label>
      <ion-input formControlName="name"></ion-input>
    </ion-item>
    <div *ngIf="myForm.get('name').invalid && myForm.get('name').touched">
      <ion-text color="danger">Name is required and must be at least 3 characters long.</ion-text>
    </div>

    <ion-item>
      <ion-label position="floating">Email</ion-label>
      <ion-input formControlName="email"></ion-input>
    </ion-item>
    <div *ngIf="myForm.get('email').invalid && myForm.get('email').touched">
      <ion-text color="danger">Please enter a valid email.</ion-text>
    </div>

    <ion-item>
      <ion-label position="floating">Age</ion-label>
      <ion-input type="number" formControlName="age"></ion-input>
    </ion-item>
    <div *ngIf="myForm.get('age').invalid && myForm.get('age').touched">
      <ion-text color="danger">Age is required and must be at least 18.</ion-text>
    </div>

    <ion-button expand="full" type="submit" [disabled]="myForm.invalid">Submit</ion-button>
  </form>
</ion-content>

  1. Gestió d'Errors en Formularis

4.1. Mostrant Missatges d'Error

És important proporcionar retroalimentació visual als usuaris quan hi ha errors en el formulari. Això es pot fer mostrant missatges d'error sota els camps corresponents.

4.2. Exemple de Gestió d'Errors

En l'exemple anterior, hem afegit divs que mostren missatges d'error si els camps no són vàlids i han estat tocats.

<div *ngIf="myForm.get('name').invalid && myForm.get('name').touched">
  <ion-text color="danger">Name is required and must be at least 3 characters long.</ion-text>
</div>

  1. Exemples Pràctics

Exemple 1: Validació de Telèfon

Afegim un camp de telèfon amb validació per assegurar que només conté números.

this.myForm = this.fb.group({
  phone: ['', [Validators.required, Validators.pattern('^[0-9]+$')]],
});
<ion-item>
  <ion-label position="floating">Phone</ion-label>
  <ion-input formControlName="phone"></ion-input>
</ion-item>
<div *ngIf="myForm.get('phone').invalid && myForm.get('phone').touched">
  <ion-text color="danger">Phone is required and must contain only numbers.</ion-text>
</div>

  1. Exercicis Pràctics

Exercici 1: Afegir Validació de Contrasenya

  1. Afegiu un camp de contrasenya al formulari.
  2. La contrasenya ha de tenir almenys 6 caràcters.
  3. Mostreu un missatge d'error si la contrasenya no compleix els requisits.

Solució:

this.myForm = this.fb.group({
  password: ['', [Validators.required, Validators.minLength(6)]],
});
<ion-item>
  <ion-label position="floating">Password</ion-label>
  <ion-input type="password" formControlName="password"></ion-input>
</ion-item>
<div *ngIf="myForm.get('password').invalid && myForm.get('password').touched">
  <ion-text color="danger">Password is required and must be at least 6 characters long.</ion-text>
</div>

Conclusió

En aquesta secció, hem après com implementar la validació de formularis i gestionar errors en una aplicació Ionic. Hem vist com configurar formularis reactius, afegir validacions i proporcionar retroalimentació visual als usuaris. Aquests conceptes són fonamentals per crear aplicacions robustes i amigables per als usuaris. En el proper mòdul, explorarem com utilitzar plugins Ionic Native i Cordova per accedir a les funcionalitats del dispositiu.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats