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

Utilitzant Formularis Ionic

Següent ►
►

Els formularis són una part essencial de moltes aplicacions mòbils, ja que permeten als usuaris introduir i enviar dades. En aquest tema, aprendrem com crear i gestionar formularis en una aplicació Ionic utilitzant Angular Forms.

Continguts

  1. Introducció als Formularis en Ionic
  2. Creant un Formulari Bàsic
  3. Validació de Formularis
  4. Gestió d'Errors
  5. Exercicis Pràctics
  6. Conclusió

Introducció als Formularis en Ionic

Ionic utilitza Angular per gestionar els formularis, aprofitant les potents funcionalitats d'Angular Forms. Hi ha dues maneres principals de treballar amb formularis en Angular:

  • Formularis Basats en Plantilla (Template-driven forms): Utilitzen directives Angular en el codi HTML per crear i gestionar formularis.
  • Formularis Reactius (Reactive forms): Utilitzen una estructura basada en models per gestionar l'estat del formulari en el codi TypeScript.

En aquest tema, ens centrarem en els formularis reactius, ja que ofereixen més control i flexibilitat.

Creant un Formulari Bàsic

Pas 1: Configuració del Mòdul

Primer, assegura't que el mòdul ReactiveFormsModule estigui importat en el teu mòdul principal (app.module.ts):

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    // les teves declaracions de components
  ],
  imports: [
    // altres mòduls
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Pas 2: Creant el Formulari en el Component

Crea un nou component per al formulari:

ionic generate component user-form

En el fitxer user-form.component.ts, defineix el formulari utilitzant FormBuilder:

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

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.scss'],
})
export class UserFormComponent implements OnInit {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.userForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }

  onSubmit() {
    if (this.userForm.valid) {
      console.log(this.userForm.value);
    } else {
      console.log('Form is not valid');
    }
  }
}

Pas 3: Creant la Plantilla del Formulari

En el fitxer user-form.component.html, crea la plantilla del formulari:

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <ion-item>
    <ion-label position="floating">Name</ion-label>
    <ion-input formControlName="name"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="floating">Email</ion-label>
    <ion-input formControlName="email" type="email"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="floating">Password</ion-label>
    <ion-input formControlName="password" type="password"></ion-input>
  </ion-item>
  <ion-button expand="full" type="submit">Submit</ion-button>
</form>

Validació de Formularis

La validació és crucial per assegurar que les dades introduïdes pels usuaris siguin correctes i segures. En el nostre exemple, ja hem afegit algunes validacions bàsiques utilitzant Validators d'Angular.

Mostrant Missatges d'Error

Podem mostrar missatges d'error en la plantilla del formulari:

<ion-item>
  <ion-label position="floating">Name</ion-label>
  <ion-input formControlName="name"></ion-input>
</ion-item>
<div *ngIf="userForm.get('name').invalid && userForm.get('name').touched">
  <ion-text color="danger">Name is required</ion-text>
</div>

<ion-item>
  <ion-label position="floating">Email</ion-label>
  <ion-input formControlName="email" type="email"></ion-input>
</ion-item>
<div *ngIf="userForm.get('email').invalid && userForm.get('email').touched">
  <ion-text color="danger">
    <span *ngIf="userForm.get('email').errors.required">Email is required</span>
    <span *ngIf="userForm.get('email').errors.email">Invalid email format</span>
  </ion-text>
</div>

<ion-item>
  <ion-label position="floating">Password</ion-label>
  <ion-input formControlName="password" type="password"></ion-input>
</ion-item>
<div *ngIf="userForm.get('password').invalid && userForm.get('password').touched">
  <ion-text color="danger">
    <span *ngIf="userForm.get('password').errors.required">Password is required</span>
    <span *ngIf="userForm.get('password').errors.minlength">Password must be at least 6 characters long</span>
  </ion-text>
</div>

Gestió d'Errors

És important gestionar els errors de manera adequada per millorar l'experiència de l'usuari. A més de mostrar missatges d'error, podem desactivar el botó de submissió si el formulari no és vàlid:

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

Exercicis Pràctics

Exercici 1: Afegir un Camp de Confirmació de Contrasenya

  1. Afegeix un camp de confirmació de contrasenya al formulari.
  2. Assegura't que la contrasenya i la confirmació de contrasenya coincideixin.
  3. Mostra un missatge d'error si les contrasenyes no coincideixen.

Solució

ngOnInit() {
  this.userForm = this.fb.group({
    name: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(6)]],
    confirmPassword: ['', Validators.required]
  }, { validator: this.passwordMatchValidator });
}

passwordMatchValidator(form: FormGroup) {
  return form.get('password').value === form.get('confirmPassword').value
    ? null : { mismatch: true };
}
<ion-item>
  <ion-label position="floating">Confirm Password</ion-label>
  <ion-input formControlName="confirmPassword" type="password"></ion-input>
</ion-item>
<div *ngIf="userForm.errors?.mismatch && userForm.get('confirmPassword').touched">
  <ion-text color="danger">Passwords do not match</ion-text>
</div>

Conclusió

En aquest tema, hem après com crear i gestionar formularis en una aplicació Ionic utilitzant Angular Forms. Hem vist com crear un formulari bàsic, afegir validacions i gestionar errors. Els exercicis pràctics proporcionats t'ajudaran a reforçar els conceptes apresos. En el proper tema, explorarem la validació i gestió d'errors en més profunditat.

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