Week 4 Day 4: Built template driven forms with validation

This commit is contained in:
2026-01-09 16:25:05 +05:30
parent 344653ae05
commit f0ea371219
2 changed files with 61 additions and 0 deletions

32
Week-4/Day-4/Reame.md Normal file
View File

@@ -0,0 +1,32 @@
# Week 4 Day 4: Template Driven Forms
## Date
08 January 2026
## Objective
To learn how to create and manage user input forms using Angular's template-driven approach.
## Topics Covered
- Introduction to Angular Forms
- Template Driven Forms
- ngModel
- Form Validation
- Handling User Input
## Activities Performed
- Designed HTML forms using Angular directives
- Implemented two-way data binding with ngModel
- Added form validations (required, email, length)
- Displayed validation messages
- Practiced form submission handling
## Tools & Technologies Used
- Angular
- HTML
- TypeScript
## Learning Outcome
Understood how Angular simplifies form handling using template-driven forms and built validated user input forms.
## Status
Completed

View File

@@ -0,0 +1,29 @@
## Angular Forms Template Driven Forms
### Introduction to Forms
Forms are used to collect user input and are essential in almost every web application.
### Template Driven Forms
- Simple and easy to use
- Logic written mainly in HTML
- Uses ngModel
### Form Example
<form>
<input type="text" [(ngModel)]="username" name="username">
</form>
### Form Validation
- Required fields
- Minimum length
- Email format
<input type="email" required>
### Practical Work Done
- Created input forms
- Implemented validation
- Handled user input
- Displayed validation messages
### Learning Outcome
Understood how Angular handles basic forms and validation using template-driven approach.