Els formularis basats en plantilles en 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ó. Aquest mètode és ideal per a formularis senzills i ràpids de configurar.
Objectius d'aquest tema
- Entendre què són els formularis basats en plantilles.
- Aprendre a crear un formulari basat en plantilles.
- Validar formularis utilitzant validacions integrades i personalitzades.
- Gestionar l'enviament de formularis i l'accés a les dades del formulari.
- Introducció als formularis basats en plantilles
Els formularis basats en plantilles utilitzen directives Angular per vincular el formulari HTML amb el model de dades. Aquest enfocament és més declaratiu i menys programàtic que els formularis reactius.
Avantatges
- Simplicitat: Ideal per a formularis senzills.
- Declaratiu: La major part de la lògica es defineix en la plantilla HTML.
Desavantatges
- Escalabilitat: Pot ser menys adequat per a formularis complexos.
- Testabilitat: Més difícil de provar en comparació amb els formularis reactius.
- Creació d'un formulari basat en plantilles
Pas 1: Configuració del mòdul
Primer, assegura't d'importar FormsModule en el 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: Creació del formulari en la plantilla
A continuació, crea el formulari en la plantilla HTML del component.
<!-- app.component.html -->
<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: Gestió de l'enviament del formulari
Defineix la lògica per gestionar l'enviament del formulari en el component TypeScript.
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
onSubmit(form: any): void {
console.log('Form Data: ', form.value);
}
}
- Validació de formularis
Validacions integrades
Angular proporciona diverses directives de validació integrades que es poden utilitzar en els formularis basats en plantilles.
required: Assegura que el camp no estigui buit.email: Valida que el camp contingui una adreça de correu electrònic vàlida.minlengthimaxlength: Defineixen la longitud mínima i màxima del camp.
Validacions personalitzades
Per crear una validació personalitzada, es pot utilitzar la directiva ngModel amb una funció de validació.
// app.component.ts
import { Component } from '@angular/core';
import { NgModel } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
validateName(control: NgModel): { [key: string]: boolean } | null {
const name = control.value;
if (name && name.length < 3) {
return { 'nameInvalid': true };
}
return null;
}
}<input type="text" id="name" name="name" ngModel #name="ngModel" [ngModelOptions]="{ updateOn: 'blur' }" [ngModel]="validateName(name)">
<div *ngIf="name.errors?.nameInvalid">El nom ha de tenir almenys 3 caràcters.</div>
- Accés a les dades del formulari
Pots accedir a les dades del formulari utilitzant la referència del formulari en la plantilla.
Exercici pràctic
Objectiu
Crea un formulari de registre d'usuari que inclogui camps per al nom, correu electrònic i contrasenya. Afegeix validacions per assegurar que tots els camps són obligatoris i que la contrasenya té almenys 6 caràcters.
Solució
<!-- app.component.html -->
<form #registerForm="ngForm" (ngSubmit)="onRegister(registerForm)">
<div>
<label for="username">Nom d'usuari:</label>
<input type="text" id="username" name="username" ngModel required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" ngModel required email>
</div>
<div>
<label for="password">Contrasenya:</label>
<input type="password" id="password" name="password" ngModel required minlength="6">
</div>
<button type="submit" [disabled]="registerForm.invalid">Registrar</button>
</form>// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
onRegister(form: any): void {
console.log('Form Data: ', form.value);
}
}Conclusió
Els formularis basats en plantilles són una manera senzilla i eficient de crear formularis en Angular. Utilitzant directives Angular, pots vincular fàcilment el formulari HTML amb el model de dades de l'aplicació, afegir validacions i gestionar l'enviament del formulari. Aquest mètode és ideal per a formularis senzills i ràpids de configurar. En el següent tema, explorarem els formularis reactius, que ofereixen més control i flexibilitat per a formularis més complexos.
Curs d'Angular 2+
Mòdul 1: Introducció a Angular
- Què és Angular?
- Configuració de l'entorn de desenvolupament
- La teva primera aplicació Angular
- Arquitectura d'Angular
Mòdul 2: Conceptes bàsics de TypeScript
- Introducció a TypeScript
- Variables i tipus de dades en TypeScript
- Funcions i funcions fletxa
- Classes i interfícies
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
- Introducció al client HTTP
- Realització de sol·licituds HTTP
- Gestió de respostes HTTP
- Ús d'observables