{"id":2141,"date":"2024-08-07T12:24:39","date_gmt":"2024-08-07T19:24:39","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2141"},"modified":"2024-08-07T12:24:39","modified_gmt":"2024-08-07T19:24:39","slug":"when-you-dont-need-template-driven-or-reactive-forms","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/when-you-dont-need-template-driven-or-reactive-forms\/","title":{"rendered":"When you don’t need template-driven or reactive forms"},"content":{"rendered":"\n

A common misconception shared by many Angular developers is that if you have a form, you need to use template-driven or reactive forms to handle it.<\/p>\n\n\n\n

The truth is, in most cases, simple forms don’t need any of that. Instead, you can use template reference variables<\/a>. My favorite example is a login form:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The two template reference variables used in the above example are sufficient to capture the username and password when the user clicks the log-in button. There is no need for extra complexity!<\/p>\n\n\n\n

We lose some features along the way, such as reactivity to changes and automatic form validation. For instance, if I use this expression, the value will not change unless the component gets refreshed by another change:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

This is because no Angular event listener triggers change detection when the form input value changes. But again, for my example of the log-in form, it doesn’t matter.<\/p>\n\n\n\n

You can check out a live example here<\/a> where I capture updates when the user clicks a button to emulate some reactivity. For anything more complex than such an example, using template-driven or reactive forms<\/a> makes perfect sense.<\/p>\n\n\n\n

If you want to learn more about similar tips and tricks through code challenges delivered to your inbox twice a week, check out the Angular Accelerator program<\/a>. It’s currently open for 5 free scholarships<\/a>, and there’s a 5-day free trial no matter what!<\/p>\n","protected":false},"excerpt":{"rendered":"

A common misconception shared by many Angular developers is that if you have a form, you need to use template-driven or reactive forms to handle it. The truth is, in most cases, simple forms don’t need any of that. Instead, you can use template reference variables. My favorite example is a login form: The two […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,22],"tags":[],"class_list":["post-2141","post","type-post","status-publish","format-standard","hentry","category-angular","category-forms"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=2141"}],"version-history":[{"count":1,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2141\/revisions"}],"predecessor-version":[{"id":2144,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2141\/revisions\/2144"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=2141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=2141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=2141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}