https://github.com/leolanese/angular19-forms-strategies
Angular (19+) Forms Patterns: Template Driven, React Driven Template and Signal Driven forms
https://github.com/leolanese/angular19-forms-strategies
angular
Last synced: about 1 year ago
JSON representation
Angular (19+) Forms Patterns: Template Driven, React Driven Template and Signal Driven forms
- Host: GitHub
- URL: https://github.com/leolanese/angular19-forms-strategies
- Owner: leolanese
- Created: 2024-10-23T16:49:44.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-26T11:38:07.000Z (about 1 year ago)
- Last Synced: 2025-05-06T21:20:29.485Z (about 1 year ago)
- Topics: angular
- Language: TypeScript
- Homepage:
- Size: 428 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular (19+) Forms: `Template Driven`, `React Driven Template` and `Signal Driven`
## DEMO
---
## Template-Driven Form Component
```js
export class PetListComponent {
items: Item[] = [...items]; // Direct array manipulation
newItemName = '';
addItem(): void {
if (this.newItemName.trim()) {
this.items.push({ name: this.newItemName.trim(), isChecked: false });
this.newItemName = '';
}
}
}
```
Key characteristics:
- Uses [(ngModel)] for two-way binding
- Form state is managed directly in the component class
- Simpler to implement but less control over form state
- Changes are tracked through Angular's change detection
- Good for simple forms with basic validation
## Reactive Form Component
```js
export class PetListComponent implements OnInit {
petForm: FormGroup;
constructor(private fb: FormBuilder) {
this.petForm = this.fb.group({
items: this.fb.array([]),
newItemName: ['', Validators.required]
});
}
get itemsArray(): FormArray {
return this.petForm.get('items') as FormArray;
}
}
```
Key characteristics:
- Uses FormGroup, FormArray, and FormControl for form state management
- Form state is managed through reactive forms API
- More control over form state and validation
- Better for complex forms with dynamic fields
- Easier to test and maintain
- Form state is immutable and changes are tracked through form controls
reactive-driven forms
- ReactiveFormsModule is used instead of `FormsModule`
- FormBuilder is utilized to construct FormGroup and FormArray.
- FormArray holds the lists of cats and dogs, where each pet is a form group containing name and isChecked controls.
The form controls are accessed dynamically using the index in the template.
## Signal-based Form Component
```js
export class PetListSignalComponent {
items = signal([...items]); // Using Angular's new signal API
newItemName = '';
addItem(): void {
if (this.newItemName.trim()) {
this.items.update(items => [...items, { name: this.newItemName.trim(), isChecked: false }]);
this.newItemName = '';
}
}
}
```
## Key characteristics:
✅- Uses Angular's new signal() API for state management
✅- More modern approach to state management
✅- Better performance through fine-grained reactivity
✅- Simpler than reactive forms but more powerful than template-driven
✅- Changes are tracked through signals instead of change detection
✅- Good balance between simplicity and control
✅- Used `updateOn` for better Performance & UX
---
### :100: Thanks!
#### Now, don't be an stranger. Let's stay in touch!
##### :radio_button: Linkedin: LeoLanese
##### :radio_button: Twitter: @LeoLanese
##### :radio_button: DEV.to: Blog
##### :radio_button: Questions / Suggestion / Recommendation: developer@leolanese.com