// registration.model.ts
export interface RegistrationData {
email: string;
password: string;
confirmPassword: string;
acceptedTerms: boolean;
}
Cette interface reflète ce qui serait généralement envoyé à une API back-end. Il n’y a pas de duplication d’état, pas d’objet de « valeur de formulaire » distinct et aucun mappage requis au moment de la soumission.
Création du formulaire basé sur un signal
Le formulaire lui-même est créé dans le composant en utilisant un signal inscriptible comme source de vérité. Le form() la fonction attache la validation sémantique du formulaire, l’état du champ et la soumission à ce signal.
// registration.component.ts
import { CommonModule } from "@angular/common";
import { Component, signal } from "@angular/core";
import {
email,
form,
FormField,
required,
submit,
} from "@angular/forms/signals";
import { RegistrationData } from "./registration.model";
@Component({
selector: "app-registration",
imports: (FormField, CommonModule),
templateUrl: "./registration.html",
styleUrl: "./registration.css",
})
export class Registration {
readonly model = signal({
email: "",
password: "",
confirmPassword: "",
acceptedTerms: false,
});
readonly registrationForm = form(this.model, (schema) => {
required(schema.email, { message: "Email is required" });
email(schema.email, { message: "Enter a valid email address" });
required(schema.password, { message: "Password is required" });
required(schema.confirmPassword, {
message: "Please confirm your password",
});
required(schema.acceptedTerms, {
message: "You must accept the terms to continue",
});
});
async onSubmit(event?: Event) {
event?.preventDefault();
await submit(this.registrationForm, (value) => {
console.log(value());
// Mock Server Call
return Promise.resolve((
{
kind: "EmailAlreadyExists",
field: this.registrationForm.email,
error: { kind: "server", message: "Email already taken" },
},
));
});
}
}
Plusieurs décisions de conception méritent d’être notées.
