How to handle forms in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Form handling is essential for capturing and validating user input in Angular applications, from simple contact forms to complex data entry interfaces. As the creator of CoreUI, a widely used open-source UI library, and with over 25 years of experience in software development including Angular since 2014, I’ve implemented countless forms across enterprise applications. The most effective approach is using reactive forms with FormBuilder, which provides programmatic control over form state and validation. This method offers superior testing capabilities and scalability compared to template-driven forms.
Use reactive forms with FormBuilder to create robust, testable forms with comprehensive validation support.
import { Component } from '@angular/core'
import { FormBuilder, FormGroup, Validators } from '@angular/forms'
@Component({
selector: 'app-user-form',
template: `
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
<input formControlName="name" placeholder="Name">
<input formControlName="email" placeholder="Email">
<button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>
`
})
export class UserFormComponent {
userForm: FormGroup
constructor(private fb: FormBuilder) {
this.userForm = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]]
})
}
onSubmit() {
if (this.userForm.valid) {
console.log(this.userForm.value)
}
}
}
Reactive forms use FormBuilder to create FormGroup instances that represent the form structure and validation rules. Each form control is bound using the formControlName directive, and the entire form state is managed programmatically. Built-in validators like Validators.required and Validators.email provide common validation patterns, while the form’s validity status automatically updates the UI state.
Best Practice Note:
This is the approach we use in CoreUI Angular components for all form implementations. Reactive forms provide better performance, easier testing, and more predictable data flow compared to template-driven forms, making them ideal for enterprise applications.
