Angular Forms
Forms in Angular are used to handle user input and collect data. Angular provides two main approaches for working with forms:
- Template-driven Forms – Suitable for simpler forms and use directives in the template.
- Reactive Forms – Suitable for complex forms, uses a more explicit and scalable approach using code in the component class.
1. Template-Driven Forms
Template-driven forms are easier to use for simple form scenarios. They are declared in the HTML using directives like ngModel.
Step-by-Step Example:
1. Import FormsModule
Open your module file (e.g., app.module.ts) and import FormsModule.
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],
bootstrap: [AppComponent],
})
export class AppModule {}
2. HTML Template
<h2>Template-driven Form Example</h2>
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
<label>Name:</label>
<input type="text" name="name" ngModel required />
<label>Email:</label>
<input type="email" name="email" ngModel required />
<button type="submit">Submit</button>
</form>
3. Component Class
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
onSubmit(form: NgForm) {
console.log('Form Data:', form.value);
}
}
Advantages of Template-driven Forms
- Easy to implement for basic use-cases
- Less code in the component class
- Two-way data binding via
ngModel
2. Reactive Forms
Reactive forms are more powerful and scalable, suitable for dynamic and complex forms.
Step-by-Step Example:
1. Import ReactiveFormsModule
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, ReactiveFormsModule],
bootstrap: [AppComponent],
})
export class AppModule {}
2. Component Class
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
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('Form Data:', this.userForm.value);
}
}
}
3. HTML Template
<h2>Reactive Form Example</h2>
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
<label>Name:</label>
<input type="text" formControlName="name" />
<div *ngIf="userForm.get('name')?.invalid && userForm.get('name')?.touched">
Name is required.
</div>
<label>Email:</label>
<input type="email" formControlName="email" />
<div *ngIf="userForm.get('email')?.invalid && userForm.get('email')?.touched">
Enter a valid email.
</div>
<button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>
Advantages of Reactive Forms
- More control and scalability
- Easier to test and debug
- Dynamic form generation is easier
- Strongly typed and explicit
Comparison Table
| Feature | Template-driven | Reactive |
|---|---|---|
| Module | FormsModule | ReactiveFormsModule |
| Form Controls | Defined in template using ngModel |
Defined in component using FormControl or FormGroup |
| Validation | Using directives | Using Validator functions |
| Scalability | Less scalable | Highly scalable |
Conclusion
Angular provides powerful ways to handle forms, each suited for different use cases. For small, simple forms, template-driven is great. For complex, scalable applications, reactive forms are the better choice.
If you have any questions, feel free to ask. Thank you for reading!
If you have any query or question, please contact through below form. Our team will be in touch with you soon.
Please provide your valueable feedback or suggession as well.