Validating email address form

Posted by / 23-Apr-2019 05:58

An invalid response of one of the validators makes the input of the form invalid.

To get started, let's create a new angular project first.

Of course, you can also use an existing angular-cli project.

To create a new project, we are going to use the angular-cli.

The submit-button will disabled while our contact Form is not valid.

If that was a little bit to fast for you, check out my guide on reactive forms in angular, where you can find much more detailed information about reactive forms.

Now that we have created a form to validate, we can finally start thinking about the actual validation.

Probably the first and easiest requirement for form-input that comes to mind is to make fields "required".

We can just add it to the array of validators like this: That was very basic, wasn't it?Fortunately, angular has a required-validator included so implementing that feature is quite simple.All we need to do, is to extend the definition of our Form Group.We will later use it to prompt specific messages to the user.With custom validators, we now have the possibility to check the input in many ways.

validating email address form-19validating email address form-47validating email address form-72

To create that component we again use the angular cli: That's all we need to add to our for now. We also assign each field of our Form Control to one HTML-Element using "form Control Name".