Validation des formulaires

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

@Component({
selector: 'app-basic-form',
template: `
<form [formGroup]="userForm" (ngSubmit)="onSubmit()"> <label for="username">Nom d'utilisateur :</label> <input id="username" formControlName="username" />
<div *ngIf="userForm.get('username')?.invalid && userForm.get('username')?.touched">
Le nom d'utilisateur est requis et doit contenir au moins 4 caractères. </div>

<label for="email">Email :</label>
<input id="email" formControlName="email" />
<div *ngIf="userForm.get('email')?.invalid && userForm.get('email')?.touched">
Veuillez entrer une adresse email valide.
</div>

<button type="submit" [disabled]="userForm.invalid">Envoyer</button>
</form>

`
})
export class BasicFormComponent {
userForm: FormGroup;

constructor(private fb: FormBuilder) {
this.userForm = this.fb.group({
username: ['', [Validators.required, Validators.minLength(4)]],
email: ['', [Validators.required, Validators.email]]
});
}

onSubmit() {
if (this.userForm.valid) {
console.log('Formulaire soumis :', this.userForm.value);
}
}
}

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

@Component({
selector: 'app-advanced-form',
template: `
<form [formGroup]="profileForm" (ngSubmit)="submitProfile()"> <label for="fullName">Nom complet :</label> <input id="fullName" formControlName="fullName" />
<div *ngIf="profileForm.get('fullName')?.invalid && profileForm.get('fullName')?.touched">
Le nom complet est requis et doit contenir au moins 4 caractères. </div>

<label for="email">Email :</label>
<input id="email" formControlName="email" />
<div *ngIf="profileForm.get('email')?.invalid && profileForm.get('email')?.touched">
Veuillez entrer une adresse email valide.
</div>

<label for="age">Âge :</label>
<input id="age" type="number" formControlName="age" />
<div *ngIf="profileForm.get('age')?.invalid && profileForm.get('age')?.touched">
L'âge doit être compris entre 18 et 99 ans.
</div>

<button type="submit" [disabled]="profileForm.invalid">Enregistrer</button>
</form>

`
})
export class AdvancedFormComponent implements OnInit {
profileForm: FormGroup;

constructor(private fb: FormBuilder) {}

ngOnInit() {
this.profileForm = this.fb.group({
fullName: ['', [Validators.required, Validators.minLength(4)]],
email: ['', [Validators.required, Validators.email]],
age: [null, [Validators.required, Validators.min(18), Validators.max(99)]]
});

this.profileForm.valueChanges.pipe(debounceTime(300)).subscribe(value => {
console.log('Changements du formulaire :', value);
});

}

submitProfile() {
if (this.profileForm.valid) {
console.log('Profil enregistré :', this.profileForm.value);
}
}
}