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

Formularis basats en plantilles

Següent ►
►

Els formularis basats en plantilles a Angular són una manera senzilla i declarativa de crear i gestionar formularis. Utilitzen directives Angular per vincular el formulari HTML amb el model de dades de l'aplicació.

Objectius d'aquest tema

  • Comprendre els conceptes bàsics dels formularis basats en plantilles.
  • Aprendre a crear un formulari basat en plantilles.
  • Validar formularis utilitzant validacions integrades i personalitzades.
  • Gestionar l'estat del formulari i els missatges d'error.

Conceptes clau

  1. Directiva ngModel

La directiva ngModel és el cor dels formularis basats en plantilles. Permet la vinculació bidireccional entre el formulari HTML i el model de dades.

  1. Directiva ngForm

La directiva ngForm s'aplica automàticament a qualsevol element <form> i proporciona un objecte de formulari Angular que conté l'estat del formulari i els controls.

  1. Validacions

Angular proporciona diverses validacions integrades com required, minlength, maxlength, pattern, etc. També es poden crear validacions personalitzades.

Crear un formulari basat en plantilles

Pas 1: Configuració del mòdul

Assegura't d'importar el mòdul FormsModule al mòdul de l'aplicació.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Pas 2: Crear el formulari HTML

Crea un formulari HTML utilitzant la directiva ngModel per vincular els controls del formulari amb el model de dades.

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <div>
    <label for="name">Nom:</label>
    <input type="text" id="name" name="name" ngModel required>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" ngModel required email>
  </div>
  <button type="submit" [disabled]="userForm.invalid">Enviar</button>
</form>

Pas 3: Gestionar l'enviament del formulari

Afegeix la lògica per gestionar l'enviament del formulari al component.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  onSubmit(form: any) {
    console.log('Form Data: ', form.value);
  }
}

Validació de formularis

Validacions integrades

Angular proporciona diverses validacions integrades que es poden aplicar directament als controls del formulari.

<div>
  <label for="name">Nom:</label>
  <input type="text" id="name" name="name" ngModel required minlength="3">
  <div *ngIf="userForm.controls.name?.invalid && userForm.controls.name?.touched">
    <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>

Validacions personalitzades

Es poden crear validacions personalitzades utilitzant directives Angular.

import { Directive } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';

@Directive({
  selector: '[appCustomValidator]',
  providers: [{ provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true }]
})
export class CustomValidatorDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    const isValid = /* lògica de validació */;
    return isValid ? null : { customError: true };
  }
}
<input type="text" id="custom" name="custom" ngModel appCustomValidator>
<div *ngIf="userForm.controls.custom?.errors?.customError">Error personalitzat.</div>

Resum

En aquest tema, hem après a:

  • Crear formularis basats en plantilles utilitzant la directiva ngModel.
  • Aplicar validacions integrades i personalitzades als controls del formulari.
  • Gestionar l'estat del formulari i mostrar missatges d'error.

Els formularis basats en plantilles són una manera poderosa i senzilla de gestionar formularis a Angular, especialment per a aplicacions petites i mitjanes. En el següent tema, explorarem els formularis reactius, que ofereixen més control i flexibilitat per a aplicacions més complexes.

◄ Anterior
◄
Següent ►
►

Curs d'Angular

Mòdul 1: Introducció a Angular

Mòdul 2: Components d'Angular

Mòdul 3: Enllaç de dades i directives

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

Mòdul 5: Enrutament i navegació

Mòdul 6: Formularis a Angular

Mòdul 7: Client HTTP i observables

Mòdul 8: Gestió d'estat

Mòdul 9: Proves a Angular

Mòdul 10: Conceptes avançats d'Angular

Mòdul 11: Desplegament i millors pràctiques

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