{"id":1954,"date":"2024-02-01T14:54:41","date_gmt":"2024-02-01T22:54:41","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1954"},"modified":"2024-02-01T14:54:42","modified_gmt":"2024-02-01T22:54:42","slug":"5-tips-for-strictly-typed-reactive-forms","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/5-tips-for-strictly-typed-reactive-forms\/","title":{"rendered":"5 tips for Strictly Typed Reactive Forms"},"content":{"rendered":"\n

Forms can be a very complex part of any web application, and today, I will cover some useful tips and tricks for using Reactive Forms with strict types.<\/p>\n\n\n\n

    \n
  1. Use nonNullable: true<\/code> to restore default values on reset<\/strong><\/li>\n<\/ol>\n\n\n\n

    Form controls and groups are nullable by default in Angular, which means that the following example of FormControl<\/a><\/code> value isn’t of type string<\/code>:<\/p>\n\n\n

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

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

    Instead, if you try to read email.value<\/code>, you’ll see that the type is string<\/code> or null<\/code>. Why would that be the case since we have a default value? That’s because the form can be reset with a <button type=\"reset\"><\/code> on the form or by calling email.reset()<\/code>, for instance.<\/p>\n\n\n\n

    The trick then is to make that control non nullable by adding the following option:<\/p>\n\n\n

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

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

    Now, when the form gets reset, email.value<\/code> is equal to \"test2@gmail.com\"<\/code>, which is perfect in several different form scenarios, such as an edit form, where we don’t want to “lose” the previous values, but just “reset” to those values.<\/p>\n\n\n\n

    2. Using non-nullable form controls at scale<\/strong><\/p>\n\n\n\n

    If we want to apply that same config to several form controls, we can put them in a FormGroup<\/code> and pass that same nonNullable: true<\/code> option to the FormGroup<\/code> constructor instead of specifying it for every single control. But what if we use the FormBuilder<\/code> service<\/a>? <\/p>\n\n\n\n

    Then we can use the following syntax:<\/p>\n\n\n

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

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

    3. How to define the type of a FormControl<\/code> with no default value? <\/strong><\/p>\n\n\n\n

    If we do something like this:<\/p>\n\n\n

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

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

    We’re in trouble because Typescript will infer the type of password.value<\/code> is null<\/code>. Instead, we use generics and a union type<\/a> to specify the expected type for that value, here string<\/code> or null<\/code>:<\/p>\n\n\n

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

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

    4. How to read the values of disabled form controls?<\/strong><\/p>\n\n\n\n

    In complex forms, it is very common that some controls are enabled\/disabled based on some condition. For instance, if the user selects the country “USA, ” we might enable a state dropdown with the US states in it and disable it for other countries.<\/p>\n\n\n\n

    When a control is disabled, its value doesn’t appear as part of the form group value. Here is an example where age is obviously equal to 21, but since that control is disabled, formGroup.value<\/code> doesn’t return it:<\/p>\n\n\n

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

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

    The workaround here is to use formGroup.getRawValue()<\/code>, which will return everything, including disabled control values:<\/p>\n\n\n

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

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

    You can see that example in action on Stackblitz here<\/a>.<\/p>\n\n\n\n

    5. How to handle dynamic forms where we don’t know which controls will be present ahead of time?<\/strong><\/p>\n\n\n\n

    In some cases, forms can be completely different depending on the type of user, country, etc. As a result, we don’t know whether a control will be present or not at runtime. We can define that uncertainty in Typescript using the optional operator ?<\/code> when we define the type of our form:<\/p>\n\n\n

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

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

    In the above code, password<\/code> is defined as optional in our interface, meaning that the compiler will not throw an error if we remove that control later.<\/p>\n\n\n\n

    If your form is 100% dynamic and handling proper types for each scenario would be a nightmare, you can use the more flexible FormRecord<\/a><\/code> instead of FormGroup<\/code>:<\/p>\n\n\n

    \n
    \"\"<\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"

    Forms can be a very complex part of any web application, and today, I will cover some useful tips and tricks for using Reactive Forms with strict types. Form controls and groups are nullable by default in Angular, which means that the following example of FormControl value isn’t of type string: Instead, if you try […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-1954","post","type-post","status-publish","format-standard","hentry","category-forms"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1954","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=1954"}],"version-history":[{"count":4,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1954\/revisions"}],"predecessor-version":[{"id":1967,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1954\/revisions\/1967"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}