{"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":"https:\/\/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":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t