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

Validació de formularis

Següent ►
►

La validació de formularis és una part essencial del desenvolupament d'aplicacions web, ja que garanteix que les dades introduïdes pels usuaris siguin correctes i compleixin amb els requisits especificats. En Angular, la validació de formularis es pot fer de manera senzilla i eficient utilitzant formularis basats en plantilles o formularis reactius.

Contingut

  1. Introducció a la validació de formularis
  2. Validació en formularis basats en plantilles
  3. Validació en formularis reactius
  4. Errors comuns i consells
  5. Exercicis pràctics

Introducció a la validació de formularis

La validació de formularis en Angular es pot realitzar de dues maneres principals:

  • Formularis basats en plantilles: Utilitzen directives Angular en les plantilles HTML per gestionar la validació.
  • Formularis reactius: Utilitzen el model de formulari reactiu d'Angular per gestionar la validació de manera programàtica.

Validació en formularis basats en plantilles

Exemple pràctic

A continuació, es mostra un exemple de com implementar la validació en un formulari basat en plantilles:

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <div>
    <label for="name">Nom:</label>
    <input type="text" id="name" name="name" ngModel required minlength="3">
    <div *ngIf="userForm.submitted && userForm.controls.name.errors">
      <small *ngIf="userForm.controls.name.errors.required">El nom és obligatori.</small>
      <small *ngIf="userForm.controls.name.errors.minlength">El nom ha de tenir almenys 3 caràcters.</small>
    </div>
  </div>
  <button type="submit">Enviar</button>
</form>

Explicació

  • ngModel: Vincula el camp del formulari amb el model de dades.
  • required: Marca el camp com a obligatori.
  • minlength: Especifica la longitud mínima del camp.
  • *ngIf: Mostra els missatges d'error si el formulari ha estat enviat i hi ha errors en el camp.

Controlador

import { Component } from '@angular/core';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html'
})
export class UserFormComponent {
  onSubmit(form: any): void {
    if (form.valid) {
      console.log('Form Submitted!', form.value);
    }
  }
}

Validació en formularis reactius

Exemple pràctic

A continuació, es mostra un exemple de com implementar la validació en un formulari reactiu:

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

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

  constructor(private fb: FormBuilder) {}

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

  onSubmit(): void {
    if (this.userForm.valid) {
      console.log('Form Submitted!', this.userForm.value);
    }
  }
}

Plantilla

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Nom:</label>
    <input type="text" id="name" formControlName="name">
    <div *ngIf="userForm.get('name').touched && userForm.get('name').invalid">
      <small *ngIf="userForm.get('name').errors.required">El nom és obligatori.</small>
      <small *ngIf="userForm.get('name').errors.minlength">El nom ha de tenir almenys 3 caràcters.</small>
    </div>
  </div>
  <button type="submit">Enviar</button>
</form>

Explicació

  • FormBuilder: Servei per crear formularis reactius.
  • FormGroup: Representa el formulari.
  • Validators: Conjunt de validadors predefinits d'Angular.
  • formControlName: Vincula el camp del formulari amb el control del formulari reactiu.

Errors comuns i consells

  • Oblidar inicialitzar el formulari: Assegura't d'inicialitzar el formulari en el mètode ngOnInit.
  • No gestionar els errors correctament: Utilitza *ngIf per mostrar missatges d'error només quan el camp és invàlid i ha estat tocat o enviat.
  • No utilitzar validadors personalitzats quan sigui necessari: Si els validadors predefinits no cobreixen les teves necessitats, crea validadors personalitzats.

Exercicis pràctics

Exercici 1

Crea un formulari basat en plantilles que validi els següents camps:

  • Correu electrònic (obligatori, format de correu electrònic)
  • Contrasenya (obligatori, mínim 6 caràcters)

Solució

<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
  <div>
    <label for="email">Correu electrònic:</label>
    <input type="email" id="email" name="email" ngModel required email>
    <div *ngIf="loginForm.submitted && loginForm.controls.email.errors">
      <small *ngIf="loginForm.controls.email.errors.required">El correu electrònic és obligatori.</small>
      <small *ngIf="loginForm.controls.email.errors.email">El format del correu electrònic no és vàlid.</small>
    </div>
  </div>
  <div>
    <label for="password">Contrasenya:</label>
    <input type="password" id="password" name="password" ngModel required minlength="6">
    <div *ngIf="loginForm.submitted && loginForm.controls.password.errors">
      <small *ngIf="loginForm.controls.password.errors.required">La contrasenya és obligatòria.</small>
      <small *ngIf="loginForm.controls.password.errors.minlength">La contrasenya ha de tenir almenys 6 caràcters.</small>
    </div>
  </div>
  <button type="submit">Enviar</button>
</form>

Exercici 2

Crea un formulari reactiu que validi els següents camps:

  • Nom d'usuari (obligatori, mínim 4 caràcters)
  • Telèfon (obligatori, només números)

Solució

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

@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html'
})
export class LoginFormComponent implements OnInit {
  loginForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.loginForm = this.fb.group({
      username: ['', [Validators.required, Validators.minLength(4)]],
      phone: ['', [Validators.required, Validators.pattern('^[0-9]*$')]]
    });
  }

  onSubmit(): void {
    if (this.loginForm.valid) {
      console.log('Form Submitted!', this.loginForm.value);
    }
  }
}
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="username">Nom d'usuari:</label>
    <input type="text" id="username" formControlName="username">
    <div *ngIf="loginForm.get('username').touched && loginForm.get('username').invalid">
      <small *ngIf="loginForm.get('username').errors.required">El nom d'usuari és obligatori.</small>
      <small *ngIf="loginForm.get('username').errors.minlength">El nom d'usuari ha de tenir almenys 4 caràcters.</small>
    </div>
  </div>
  <div>
    <label for="phone">Telèfon:</label>
    <input type="text" id="phone" formControlName="phone">
    <div *ngIf="loginForm.get('phone').touched && loginForm.get('phone').invalid">
      <small *ngIf="loginForm.get('phone').errors.required">El telèfon és obligatori.</small>
      <small *ngIf="loginForm.get('phone').errors.pattern">El telèfon només pot contenir números.</small>
    </div>
  </div>
  <button type="submit">Enviar</button>
</form>

Resum

En aquesta secció, hem après com implementar la validació de formularis en Angular utilitzant tant formularis basats en plantilles com formularis reactius. Hem vist exemples pràctics i hem proporcionat exercicis per reforçar els conceptes apresos. La validació de formularis és una habilitat essencial per garantir la qualitat de les dades introduïdes pels usuaris i millorar l'experiència de l'usuari en les aplicacions web.

◄ Anterior
◄
Següent ►
►

Curs d'Angular 2+

Mòdul 1: Introducció a Angular

Mòdul 2: Conceptes bàsics de TypeScript

Mòdul 3: Components i plantilles

Mòdul 4: Directives i pipes

Mòdul 5: Serveis i injecció de dependències

Mòdul 6: Enrutament i navegació

Mòdul 7: Formularis en Angular

Mòdul 8: Client HTTP i observables

Mòdul 9: Gestió d'estat

Mòdul 10: Proves en Angular

Mòdul 11: Temes avançats

Mòdul 12: Desplegament i millors pràctiques

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats