Image for post
Image for post

This tutorial focuses on validation in Angular forms and it’s part of a series of tutorials focused on Angular forms. in this series, I have introduced how to create a basic form in Angular, style it using Angular material and Bootstrap, use two-way data binding to capture user data, posting data using HTTP and post using real api and error handling.

So focus of this tutorial is on providing feedback on user interactions with form. by the end of this, we should be able to show error messages when user doesn’t fill up a required field or when data entered doesn’t fit required type. HTML5 client-side form validation is a very good reference for basic concepts and examples of form validation. I encourage you to read this reference before moving forward. Angular’s form validation works hand in hand with HTML5’s standards which makes it very easy to learn. Generally speaking many attributes introduced in HTML5 such as required field validator, minimum number of character validator are already included in Angular. Angular uses a special CSS based approach to indicate a validation error that is applied on the element and parent form. In a form with couple of input elements such as textboxes, radio buttons and checkboxes validation focuses on two main avenue. First required field validation, which makes an input mandatory. …


Image for post
Image for post

Let’s see, in this series of tutorials, I have introduced how to create a basic form in Angular, style it using Angular material and Bootstrap, use two-way data binding to capture user data and posting data using HTTP.

In this tutorial we are going to discuss post form data to a real HTTP API endpoint by using a web service. When you develop a website for a real organization, they will provide you with more than one API endpoint. A simple set up could be API endpoints for testing environment, which is where you develop the code, staging environment that contains the latest release candidate and production environment where your web app is hosted. …


Angular form tutorial presented by Ramin ahmadi https://www.linkedin.com/in/raminahmadi/ or https://medium.com/@raminahmadi
Angular form tutorial presented by Ramin ahmadi https://www.linkedin.com/in/raminahmadi/ or https://medium.com/@raminahmadi

So far in these series of tutorials, I have introduced how to create a basic form in Angular, style it using Angular material and Bootstrap, and use two-way data binding to capture user data.

Now in this tutorial I’m gonna teach you how to post the data we captured from the users over the internet using API and data service. A data service compresses all HTTP access so it won’t be placed in components directly. In any practical web application, there might be several components that need to reach out using HTTP to the API. Take our details-form component as an example. It contains a form to capture user’s personal information that needs to be stored (post data). If the process of establishing a connection over HTTP is implemented in that component, then we need to copy paste the same code in any other component that might need HTTP access or if we make a change in data access, say changing server environment that leads to change in API endpoints, requires a massive modification of the code base. …

About

Ramin Ahmadi

Full stack front-end developer. I make it a goal to automate myself out of routine tasks. My motto is, 'write human readable code, lean and clean'.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store