Angular 8 Tutorial - Reactive Form Validation with Smooth Scrolling

Let me first show you how the final outcome looks:

Final outcome

The animation above shows that your screen will focus on the first validation error after you click on the submit button since the fields were not filled (invalid form). So, the user knows which fields need to be checked before submitting the form.

It is suitable and more interactive if you have a long form with multiple input fields so that you can see the smooth scrolling goes from the bottom to the specific validation error.

Let’s go to the first step.

Building the Angular Project with Bootstrap

Here I use Angular 8 with Bootstrap to set up the project. You can check my previous article on how to set up step by step an Angular 8 project by clicking here.

We use only the app component in Angular without creating any other component as it involves only one page, and here’s the folder structure looks like.

Folder structure

Since we are going to use a reactive form instead of template-driven form (which I am more familiar with), we need to import the reactive form module into the app.module.ts.

app.module.ts

Creating A Basic Sign Up Form with Validators

Next, we will create a basic sign up form which includes input fields such as first name, last name, username, email, password, and confirm password. You can add more fields as you want so that you can see the smooth scrolling clearly at the end.

Here are my app.component.htmland app.component.ts. These files include all the functions and views that we are going to create till the end of this article.

We add Validators.required to make sure that all fields need to be filled before submitting the form. Validators.pattern is used instead of Validators.email to check the email validity because I found out that abc@gmail is considered as valid when using Validators.email. That’s why Validators.pattern is more preferred here. The pattern is as below:

Validators.pattern('[a-zA-Z0-9.-]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{3,}')

We set the minimum length of the password to 6 characters by using:

Validators.minLength(6)

To ensure the confirm password is matched with the password entered, a new custom validator function called **mustMatch** is created as follows:

mustMatch Function

If we have successfully built the form, try clicking the submit button without adding any details to the form and the validation error should pop up just like below:

There is no scrolling to the first validation error yet. Next, we will implement the smooth scrolling effect.

Creating Smooth Scrolling

To implement smooth scrolling, we will use the scrollIntoView() function from JavaScript.

Create these 2 functions below and they will get the job done.

scrollTo(el: Element): void {
   if (el) {
      el.scrollIntoView({ behavior: 'smooth', block: 'center' });
   }
}
scrollToError(): void {
   const firstElementWithError = document.querySelector('.ng-  invalid[formControlName]');
   this.scrollTo(firstElementWithError);
}

There are 2 values for the behavior attribute in scrollIntoView. By default, it will set to auto. You can set the value for the block attribute as well. I prefer to set it to center as it will focus at the center of your screen. Click here for detail explanation about scrollIntoView.

querySelector() is used to find and select which element you want to focus on the page. Here we will find the ng-invalid class with formControlName as its attribute.

Here again are the app.component.html and app.component.ts that you can refer to complete this tutorial.

Conclusion

In this article, we have learned how to create a complete reactive form with multiple validations.

We also have implemented smooth scrolling to focus on the validation error to give a better interaction for the user.

If you think this article was helpful, don’t forget to share it with your friends.

#angular #javascript #programming

What is GEEK

Buddha Community

Laravel 8 Form Validation Tutorial

Laravel 8 form validation example. In this tutorial, i will show you how to submit form with validation in laravel 8.

And you will learn how to store form data in laravel 8. Also validate form data before store to db.

How to Validate Form Data in Laravel 8

1. Step 1 – Install Laravel 8 Application
2. Step 2 – Configuring Database using Env File
3. Step 3 – Create Model & Migration File For Form
4. Step 4 – Create Routes
5. Step 5 – Creating Controller
6. Step 6 – Create Blade File For Form
7. Step 7 – Start Development Server
8. Step 8 – Run Laravel 8 Form Validation App On Browser

https://laratutorials.com/laravel-8-form-validation-example-tutorial/

#laravel 8 form validation #laravel 8 form validation tutorial #laravel 8 form validation - google search #how to validate form data in laravel 8 #form validation in laravel 8

Angular 11 Reactive Forms Validation Tutorial

Reactive form validation in Angular 11 app. In this tutorial, i will show you how to use reactive form validation in angular 11 app.

As well as, and you will learn how use reactive form validation in angular 11. And also use reactive form with formGroup for validation in angular 11 app.

Reactive Form Validation In Angular 11
Step 1 – Create New Angular App
Step 2 – Import Form Module
Step 3 – Add Code on View File
Step 4 – Use Component ts File
Step 5 – Start Angular App

https://www.tutsmake.com/angular-11-reactive-forms-validation-tutorial-example/

#reactive form validation in angular 11 #angular 11/10/9/8/7 reactive forms validation example #angular 11 form validation example

Laravel 8 Form Example Tutorial - Complete Guide

Laravel 8 form example. In this tutorial, i would love to show you how to create form in laravel. And how to insert data into database using form in laravel 8.

How to Submit Form Data into Database in Laravel 8

1. Step 1 – Install Laravel 8 Application
2. Step 2 – Configuring Database using Env File
3. Step 3 – Create Model & Migration File For Add Blog Post Form
4. Step 4 – Create Routes
5. Step 5 – Creating Controller
6. Step 6 – Create Blade File For Add Blog Post Form
7. Step 7 – Start Development Server
8. Step 8 – Run Laravel 8 Form App On Browser

https://laratutorials.com/laravel-8-form-example-tutorial/

#insert form data into database using laravel #laravel bootstrap form #laravel post forms #laravel 8 form tutorial #laravel 8 form example #laravel 8 form submit tutorial

Laravel 8 Form Validation Example

In this tutorial we will see laravel 8 form validation example, form validation in laravel is very common functionalities and it is use in each and every website to validate form field.

Here, We will use has function in session to check error message in laravel 8. using this example you can check simple form validation as well as you can create your own custom validation in laravel 8.

Laravel 8 Form Validation Example

https://websolutionstuff.com/post/laravel-8-form-validation-example

---

Read Also : Laravel 8 CRUD Operation Example

https://websolutionstuff.com/post/laravel-8-crud-operation-example

#laravel 8 form validation example #form validation #how to validate form in laravel 8 #form validation in laravel #laravel #laravel8

Laravel 8 Tutorial for Beginners

Hello everyone! I just updated this tutorial for Laravel 8. In this tutorial, we’ll go through the basics of the Laravel framework by building a simple blogging system. Note that this tutorial is only for beginners who are interested in web development but don’t know where to start. Check it out if you are interested: Laravel Tutorial For Beginners

Laravel is a very powerful framework that follows the MVC structure. It is designed for web developers who need a simple, elegant yet powerful toolkit to build a fully-featured website.

#laravel 8 tutorial #laravel 8 tutorial crud #laravel 8 tutorial point #laravel 8 auth tutorial #laravel 8 project example #laravel 8 tutorial for beginners