{"id":1401,"date":"2023-09-01T05:00:00","date_gmt":"2023-09-01T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1401"},"modified":"2023-08-30T11:05:36","modified_gmt":"2023-08-30T18:05:36","slug":"asynchronous-form-validation-with-angular","status":"publish","type":"post","link":"http:\/\/www.angulartraining.com\/daily-newsletter\/asynchronous-form-validation-with-angular\/","title":{"rendered":"Asynchronous form validation with Angular"},"content":{"rendered":"\n

We’ve already covered how to write custom form data validators with Angular<\/a>. We also covered how to display custom validation feedback<\/a> to the user. Today, let’s take a look at how to perform asynchronous validation of our form data, which is useful when we need to make an HTTP request to a server to validate user input.<\/p>\n\n\n\n

The approach for asynchronous validation is very similar to what we do with regular validation. The only difference is that instead of returning ValidationErrors<\/code>, we return an Observable<\/code> or a Promise<\/code> of such ValidationErrors<\/code>:<\/p>\n\n\n\n

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

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

A ValidationErrors<\/a><\/code> object is any keys and values you want to return. I like using keys that are the name of the form input throwing the error and the value being the error message I want to display on the screen. For instance, this is one of my typical ValidationErrors<\/code> objects: <\/p>\n\n\n\n

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

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

If you want to dig deeper, here is a link to a tutorial showcasing an example of an async validator<\/a>. It’s also worth noting that asynchronous validators introduce a new validation state besides VALID and INVALID, which is PENDING. You can use that validation state to display a spinner or temporarily disable a form input while the asynchronous validation occurs.<\/p>\n","protected":false},"excerpt":{"rendered":"

We’ve already covered how to write custom form data validators with Angular. We also covered how to display custom validation feedback to the user. Today, let’s take a look at how to perform asynchronous validation of our form data, which is useful when we need to make an HTTP request to a server to validate […]<\/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-1401","post","type-post","status-publish","format-standard","hentry","category-angular","category-forms"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1401"}],"version-history":[{"count":2,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1401\/revisions"}],"predecessor-version":[{"id":1405,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1401\/revisions\/1405"}],"wp:attachment":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1401"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}