The Angular Plus Show S2 E4 - Forms Series Episode 2: Template Driven Forms
Feb 5, 2021
55:57
Angular is a feature-rich and opinionated framework. Opinionated, for example, in terms of fetching data via XHR. Most, and perhaps all, Angular developers reach for the HttpClientModule. Most of us don't have to even think about that decision. While the debate will likely never end over JavaScript frameworks, Angular developers may never end their debate over what forms implementation to use. Do you use reactive forms (which are arguably not really reactive) or template-driven forms? The Angular show panelists want to take you on a learning journey into the depths of this debate in a healthy, fun, and educational way.
If you read the Angular documentation you might be inclined to believe that Angular's template-driven forms approach is where you start, but real Angular devs use reactive forms. I mean, the name reactive is hip. And template-driven forms, that's so AngularJS-y. Why would I want to use template-driven forms?
We have the perfect guest to answer that question for you. Ward Bell, a Google Developer Expert in Angular and President/Co-Founder at IdeaBlade, has put template-driven forms through its paces for many years, and in our opinion, is one of the foremost experts on using template-driven forms in Angular. Grab your kombucha, coffee, running shoes, or really whatever you want, and join us as we learn from the master on template-driven forms. By the end of the show, you might be asking yourself why you aren't already using template-driven forms in your Angular applications.
Bonus notes from Ward after the show:
I talked through a couple of approaches during the show but I didn’t have an actual sample to refer to... I just updated the StackBlitz sample with an example of both approaches. Color me “obsessive”.
https://stackblitz.com/edit/angular-kkatri?file=src%2Fapp%2Fhero-form%2Fhero-form.component.html
The hero now has both a “Power” and a “Power Qualifier” (category and subcategory). Both are required. You pick a power and the list of qualifiers changes accordingly. A special “Select a power qualifier” appears until you pick a qualifier. This demonstrates the “disabled control” approach.
One of the selectable powers is “Other”. It has no pre-defined qualifiers. Instead, you must enter a free-form description of the “other power”; what you enter is bound to the hero’s qualifier field.
When you pick “Other”, the “Power Qualifier” selector is removed from the form and a required free-form input control takes its place. This is the alternative “ngIf” approach that I mentioned.
Click the “New” button to see how it works when Hero has no power.
Show Notes
AbstractControl: https://angular.io/api/forms/AbstractControl
Connect with us:
Aaron Frost - @aaronfrost
Jennifer Wadella - @likeOMGitsFEDAY
Brian Love - @brian_love
Ward Bell - @wardbell
Follow us on X: The Angular Plus Show
Bluesky: @theangularplusshow.bsky.social
The Angular Plus Show is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge every year to attend talks and workshops by the Angular team and community experts.
Join
Attend
X
Bluesky
Read
Watch
Edited by Patrick Hayes
Stock media provided by JUQBOXMUSIC/ Pond5
If you read the Angular documentation you might be inclined to believe that Angular's template-driven forms approach is where you start, but real Angular devs use reactive forms. I mean, the name reactive is hip. And template-driven forms, that's so AngularJS-y. Why would I want to use template-driven forms?
We have the perfect guest to answer that question for you. Ward Bell, a Google Developer Expert in Angular and President/Co-Founder at IdeaBlade, has put template-driven forms through its paces for many years, and in our opinion, is one of the foremost experts on using template-driven forms in Angular. Grab your kombucha, coffee, running shoes, or really whatever you want, and join us as we learn from the master on template-driven forms. By the end of the show, you might be asking yourself why you aren't already using template-driven forms in your Angular applications.
Bonus notes from Ward after the show:
I talked through a couple of approaches during the show but I didn’t have an actual sample to refer to... I just updated the StackBlitz sample with an example of both approaches. Color me “obsessive”.
https://stackblitz.com/edit/angular-kkatri?file=src%2Fapp%2Fhero-form%2Fhero-form.component.html
The hero now has both a “Power” and a “Power Qualifier” (category and subcategory). Both are required. You pick a power and the list of qualifiers changes accordingly. A special “Select a power qualifier” appears until you pick a qualifier. This demonstrates the “disabled control” approach.
One of the selectable powers is “Other”. It has no pre-defined qualifiers. Instead, you must enter a free-form description of the “other power”; what you enter is bound to the hero’s qualifier field.
When you pick “Other”, the “Power Qualifier” selector is removed from the form and a required free-form input control takes its place. This is the alternative “ngIf” approach that I mentioned.
Click the “New” button to see how it works when Hero has no power.
Show Notes
AbstractControl: https://angular.io/api/forms/AbstractControl
Connect with us:
Aaron Frost - @aaronfrost
Jennifer Wadella - @likeOMGitsFEDAY
Brian Love - @brian_love
Ward Bell - @wardbell
Follow us on X: The Angular Plus Show
Bluesky: @theangularplusshow.bsky.social
The Angular Plus Show is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge every year to attend talks and workshops by the Angular team and community experts.
Join
Attend
X
Bluesky
Read
Watch
Edited by Patrick Hayes
Stock media provided by JUQBOXMUSIC/ Pond5