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…


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…


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…


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

Forms are designed to serve a purpose and that usually means collecting and storing the data. In some cases, we might be interested in prepopulated forms where we pre-fill textboxes and pre-select checkboxes so that data entry would be more convenient. But when I say data in the context of an Angular app, it means a data model or model for short. The process to collect data from a form is called data binding. Angular has a handy directive that handles form called NgModel. In this tutorial, I’m going to teach you how to create a custom data model, and…


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

Having a simple form might be handy but it should be coherent with the rest of the website and look consistent in all browsers and devices. I have already covered Angular material in my previous tutorial and here I’d like to introduce another popular CSS framework called Bootstrap. I assume that you are familiar with the framework already, otherwise head their website first and learn how it works first. We are going to install Bootstrap together, look into creating basic variables and how to frame our form. …


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

Angular applications usually include different types of modules. Generally, you’ll have your app module and some other modules such as shared or Angular material, if you choose to use it. For this tutorial we need Angular’s FormsModule. Here I’m gonna show you how to add the FormsModule to our demo app. But first we need to make an angular app. Use below command to make your app or head over to my Github page and download the angular-forms tutorial app.

ng new angular-forms

and then add Angular material via below command or checkout the official getting started page at https://material.angular.io/guide/getting-started.


So I needed to create a tree component from a flat array recently. It took me sometime to put it together so I decided to share my code with you.

A flat array is an array of objects where a property on the object refers to id of another one and that’s how we can create association between objects. Imagine an array, lets call it search results array, where there is a property called “menuId” which is a unique identifier for the object and another property called “parentMenuId” which refers to menuId number of parent object. …


To understand how agile came about, we need to discuss earlier software development processes. The waterfall model, is one of the earliest software development approaches. When talking about waterfall, people think about a process where project starts with definition of requirements, a solid design based on the requirements, then implementation or development of the designed software, testing and finally maintaining it. The main goal of this approach is based on a robust requirement analysis upfront before starting the project to accomplish a comfortable level of predictability in terms od cost and project timeline.

Why using waterfall?

1. Breaking down project…


As a front end developer you might have checked value of variables for null value or undefined. For example asking for a non-existing property of an object.

let cars = {};
console.log(cars.BMW);
//returns undefine

now a simple if statement will tell you if BMW exists in cars variable. Here is how to check for that:

let cars = {};
if (cars.BMW == undefined){
console.log("cars.BMW is not defined");
} else {
console.log(cars.BMW);
}

cars.BMW also doesn’t exists because cars doesn’t have any property. To prove that, we can write below statement:

let cars = {};
if (cars.BMW == null)
{
console.log("cars.BMW is not defined");
}
else…


Some users with visual impairments require a strong contrast between text and background color. Consider a user with protanopia (color blindness), they might not be able to see the text in your website properly which possibly leads to less meaningful visual indication. to make sure text is readable by users, the WCAG has suggested a contrast ratio of at least 4.5:1 should exist between a text and its background.

You can use https://contrast-ratio.com/ to measure contrast between text and background color of your website.
http://raminahmadi.com/minimum-contrast-ratio-between-text-and-background-for-wcag-2-level-aa/

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