Angular Forms
Angular Forms
Angular supports comprehensive form features with robust two-way synchronization and integrated validation.
Form Elements
Angular accommodates standard form components:
- input fields
- select menus
- button triggers
- textareas
Two-Way Binding
In Template-Driven Forms, bind input fields using [(ngModel)] for automatic data synchronization.
<input type="text" [(ngModel)]="username" name="username">
Now the component contains a variable username linked to this input.
Component Binding
<component>({
selector: 'app-user-form',
templateUrl: './user-form.component.html'
})
export class UserFormComponent {
username = 'Alice';
}
Usage in Template
<form>
Username: <input type="text" [(ngModel)]="username" name="username">
</form>
<h2>Value: {{ username }}</h2>
Checkbox Handling
Checkbox toggles between true and false. Use [(ngModel)] to detect status:
<form>
Display Title:
<input type="checkbox" [(ngModel)]="showTitle" name="showTitle">
</form>
<h2 *ngIf="showTitle">Visible Heading</h2>
Radio Buttons
Radio buttons bound to the same model accept distinct options. Only the selected radio reflects the value:
<form>
Choose Category: <br>
<input type="radio" [(ngModel)]="category" name="category" value="books">Books
<input type="radio" [(ngModel)]="category" name="category" value="movies">Movies
<input type="radio" [(ngModel)]="category" name="category" value="music">Music
</form>
Now category will contain either books, movies, or music.
Select Dropdown
Connect dropdowns using [(ngModel)]. The selected option updates the associated property.
<form>
Choose Option:
<select [(ngModel)]="choice" name="choice">
<option value="angular">Angular</option>
<option value="react">React</option>
<option value="vue">Vue</option>
</select>
</form>
<p>You chose: {{ choice }}</p>
Full Template-Driven Example
<div class="container" ngForm #userForm="ngForm">
<form #formRef="ngForm" (ngSubmit)="onSubmit()" novalidate>
<label>Given Name:</label>
<input type="text" name="firstName" [(ngModel)]="user.firstName"><br>
<label>Family Name:</label>
<input type="text" name="lastName" [(ngModel)]="user.lastName"><br><br>
<button type="button" (click)="resetForm()">RESET</button>
</form>
<p>user = {{ user | json }}</p>
<p>initial = {{ original | json }}</p>
</div>
Component Code
<component>({
selector: 'app-user-form',
templateUrl: './user-form.component.html'
})
export class UserFormComponent {
original = { firstName: 'John', lastName: 'Doe' };
user = { ...this.original };
resetForm() {
this.user = { ...this.original };
}
onSubmit() {
console.log('Form submitted:', this.user);
}
}
Explanation
- ngModel provides live binding between form fields and component attributes.
- ngForm gives template reference for form status and control access.
- novalidate prevents HTML5 validations, deferring to Angular validators.
- resetForm() resets inputs using shallow copy.
- Submit buttons use (ngSubmit) to handle form submissions cleanly.
Prefer Learning by Watching?
Watch these YouTube tutorials to understand ANGULAR Tutorial visually:
What You'll Learn:
- 📌 Angular Forms Tutorial | Angular Tutorial For Beginners | Building Forms In Angular | Simplilearn
- 📌 Angular Forms Tutorial - 1 - Introduction