{"id":2085,"date":"2024-06-19T15:09:25","date_gmt":"2024-06-19T22:09:25","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2085"},"modified":"2024-06-19T15:09:26","modified_gmt":"2024-06-19T22:09:26","slug":"tutorial-architecting-forms-with-signals","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/tutorial-architecting-forms-with-signals\/","title":{"rendered":"Tutorial: Architecting forms with Signals"},"content":{"rendered":"\n

In today’s post, I want to showcase several Angular framework features in one example. More specifically, we’ll use standalone components<\/a>, signals with model()<\/a> and input()<\/a>, as well as forms<\/a>.<\/p>\n\n\n\n

Our goal is to build a reusable date-range picker component to select two dates:<\/p>\n\n\n

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

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

To do so, let’s create a standalone component with two HTML date inputs (no need for component libraries<\/a>!):<\/p>\n\n\n

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

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

We use ngModel<\/code> (which is from FormsModule<\/code>) to capture the current value selected by the user and set a default value for those dates if needed. To do so, let’s use two signals created by the model()<\/code> function from @angular\/core<\/code>:<\/p>\n\n\n

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

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

Two important things to note:<\/p>\n\n\n\n

    \n
  1. These two variables are signals and work seamlessly with ngModel<\/code><\/li>\n\n\n\n
  2. These variables enable two-way data bindings with the parent component as follows:<\/li>\n<\/ol>\n\n\n\n

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

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

    start<\/code> and end<\/code> are signals as well. We can use those signals to pass a default value to the child component or keep that value empty if we don’t want any:<\/p>\n\n\n

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

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

    And that code is 100% functional as-is. No need for template-driven forms or reactive forms<\/a>! Now, let’s add some features to our date-range picker component. Let’s say we want to enforce the rule that the start date cannot be after the end date and vice versa. The following bindings do the trick using the min<\/code> and max<\/code> HTML attributes:<\/p>\n\n\n

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

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

    Because this is all based on signals, it’s all reactive by default. Changing the start date or the end date automatically updates the range of what’s selectable in the other date input:<\/p>\n\n\n

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

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

    Adding more features is now as easy as adding more signals and bindings. For instance, I want to enforce a minimum start date. I added a new signal input called minDate<\/code> and I bind it to the min<\/code> attribute of our startDate<\/code>:<\/p>\n\n\n\n

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

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

    And then, in the parent component, we can pass a minimum start date:<\/p>\n\n\n

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

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

    You can find that code example in action on Stackblitz here<\/a>. Note that our date range picker has less than 20 lines of code and relies on basic HTML features (input<\/code>, min<\/code>, max<\/code>) instead of adding dependencies that would impact performance<\/a>.<\/p>\n\n\n\n

    Please email me if you’d like me to add more features to that example in a future post. I’m always happy to cover what really matters to most people reading these posts.<\/p>\n","protected":false},"excerpt":{"rendered":"

    In today’s post, I want to showcase several Angular framework features in one example. More specifically, we’ll use standalone components, signals with model() and input(), as well as forms. Our goal is to build a reusable date-range picker component to select two dates: To do so, let’s create a standalone component with two HTML date […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,21,22,29],"tags":[],"class_list":["post-2085","post","type-post","status-publish","format-standard","hentry","category-angular","category-architecture","category-forms","category-signals"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2085","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=2085"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2085\/revisions"}],"predecessor-version":[{"id":2096,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2085\/revisions\/2096"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=2085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=2085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=2085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}