{"id":541,"date":"2023-02-22T05:00:00","date_gmt":"2023-02-22T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=541"},"modified":"2023-02-21T15:53:05","modified_gmt":"2023-02-21T23:53:05","slug":"custom-form-validation-functions","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/custom-form-validation-functions\/","title":{"rendered":"Custom form validation functions"},"content":{"rendered":"\n

Let’s continue our dive into Angular form validation capabilities. So far, we have seen how to display custom feedback<\/a> to the user based on basic HTML validation features<\/a>. Today, let’s see how to customize the validation itself.<\/p>\n\n\n\n

The good news is that all we need is a function. That function takes a FormControl<\/code><\/a> as a parameter and returns null<\/code> if the value entered by the user is valid. If the value is invalid, we return a ValidationErrors object, any key\/value object we want.<\/p>\n\n\n\n

Here’s an example:<\/p>\n\n\n

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

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

Pretty straightforward, right? If the zip code is wrong, we return an object with a custom error message. Otherwise, we return null<\/code>.<\/p>\n\n\n\n

Of course, we can validate more precisely by adding several different checks and specific error messages for each case:<\/p>\n\n\n

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

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

Then to have a specific input use that validation function, we can pass it as a parameter to the FormControl<\/code> constructor like so:<\/p>\n\n\n

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

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

And then such FormControl<\/code> gets bound to the proper input in our HTML template (this is the approach for reactive forms – we will cover a method that works for template-driven forms tomorrow). We can then add some error handling by using the errors property of our FormControl<\/code>, which is going to have the ValidationErrors<\/code> object returned from our validation function:<\/p>\n\n\n

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

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

Now our form provides custom feedback using our custom validation function:<\/p>\n\n\n

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

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

You can access the code for the above example on Stackblitz.<\/a> <\/p>\n\n\n\n

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

Let’s continue our dive into Angular form validation capabilities. So far, we have seen how to display custom feedback to the user based on basic HTML validation features. Today, let’s see how to customize the validation itself. The good news is that all we need is a function. That function takes a FormControl as a […]<\/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-541","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\/541","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=541"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/541\/revisions"}],"predecessor-version":[{"id":549,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/541\/revisions\/549"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}