Week 4 Day 5: Developed reactive forms using FormGroup and validators
This commit is contained in:
32
Week-4/Day-5/Reame.md
Normal file
32
Week-4/Day-5/Reame.md
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
# Week 4 – Day 5: Reactive Forms
|
||||||
|
|
||||||
|
## Date
|
||||||
|
09 January 2026
|
||||||
|
|
||||||
|
## Objective
|
||||||
|
To understand and implement reactive forms in Angular for complex and scalable form handling.
|
||||||
|
|
||||||
|
## Topics Covered
|
||||||
|
- Introduction to Reactive Forms
|
||||||
|
- FormGroup and FormControl
|
||||||
|
- Validators
|
||||||
|
- Reactive Form Submission
|
||||||
|
- Error Handling
|
||||||
|
|
||||||
|
## Activities Performed
|
||||||
|
- Created reactive forms using TypeScript
|
||||||
|
- Applied built-in validators
|
||||||
|
- Implemented form submission logic
|
||||||
|
- Displayed validation errors dynamically
|
||||||
|
- Compared reactive forms with template-driven forms
|
||||||
|
|
||||||
|
## Tools & Technologies Used
|
||||||
|
- Angular
|
||||||
|
- TypeScript
|
||||||
|
- ReactiveFormsModule
|
||||||
|
|
||||||
|
## Learning Outcome
|
||||||
|
Developed a strong understanding of reactive forms and learned how to build scalable, controlled forms in Angular.
|
||||||
|
|
||||||
|
## Status
|
||||||
|
Completed
|
||||||
31
Week-4/Day-5/angular-reactive-forms.md
Normal file
31
Week-4/Day-5/angular-reactive-forms.md
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
## Angular Forms – Reactive Forms
|
||||||
|
|
||||||
|
### What are Reactive Forms?
|
||||||
|
Reactive forms are:
|
||||||
|
- More scalable
|
||||||
|
- Fully controlled using TypeScript
|
||||||
|
- Suitable for complex forms
|
||||||
|
|
||||||
|
### Form Group & Form Control
|
||||||
|
this.form = new FormGroup({
|
||||||
|
name: new FormControl(''),
|
||||||
|
email: new FormControl('')
|
||||||
|
});
|
||||||
|
|
||||||
|
### Validators
|
||||||
|
Validators.required
|
||||||
|
Validators.email
|
||||||
|
|
||||||
|
### Advantages of Reactive Forms
|
||||||
|
- Better control
|
||||||
|
- Easier testing
|
||||||
|
- Dynamic form creation
|
||||||
|
|
||||||
|
### Practical Work Done
|
||||||
|
- Created reactive forms
|
||||||
|
- Applied validators
|
||||||
|
- Handled form submission
|
||||||
|
- Displayed error messages
|
||||||
|
|
||||||
|
### Final Learning Outcome
|
||||||
|
By the end of Week 4, I gained hands-on experience in Angular components, services, routing, and forms, which are essential for building real-world Angular applications.
|
||||||
Reference in New Issue
Block a user