Form Validation

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">Username:</label> <input id="username" formControlName="username" />
<div *ngIf="userForm.get('username')?.invalid && userForm.get('username')?.touched">
Username is required and must be at least 4 characters. </div>

<label for="email">Email:</label>
<input id="email" formControlName="email" />
<div *ngIf="userForm.get('email')?.invalid && userForm.get('email')?.touched">
Enter a valid email address.
</div>

<button type="submit" [disabled]="userForm.invalid">Submit</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('Form Submitted:', 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">Full Name:</label> <input id="fullName" formControlName="fullName" />
<div *ngIf="profileForm.get('fullName')?.invalid && profileForm.get('fullName')?.touched">
Full Name is required and must be at least 4 characters. </div>

<label for="email">Email:</label>
<input id="email" formControlName="email" />
<div *ngIf="profileForm.get('email')?.invalid && profileForm.get('email')?.touched">
Enter a valid email address.
</div>

<label for="age">Age:</label>
<input id="age" type="number" formControlName="age" />
<div *ngIf="profileForm.get('age')?.invalid && profileForm.get('age')?.touched">
Age must be between 18 and 99.
</div>

<button type="submit" [disabled]="profileForm.invalid">Save</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('Form Changes:', value);
});

}

submitProfile() {
if (this.profileForm.valid) {
console.log('Profile Saved:', this.profileForm.value);
}
}
}