Week 4 Day 4: Built template driven forms with validation
This commit is contained in:
32
Week-4/Day-4/Reame.md
Normal file
32
Week-4/Day-4/Reame.md
Normal 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
|
||||||
29
Week-4/Day-4/angular-forms.md
Normal file
29
Week-4/Day-4/angular-forms.md
Normal 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.
|
||||||
Reference in New Issue
Block a user