Creating a Web App From Scratch Using AngularJS and Firebase: Part 2

In the first part of this series, we saw how to get started with creating an application using AngularJS and Firebase. We created our Sign In page and implemented the sign-in functionality with Firebase as the back end.

In this tutorial, we'll take this series to the next level. We'll create and set up the sign-up page and see how to do form validations in AngularJS. 

Getting Started

Let's start by cloning the first part of the tutorial from GitHub.

Once the code is fetched, navigate to the project directory and install the required dependencies.

Once all dependencies are installed, start the server.

Point your browser to http://localhost:8000/app/#/home and you should have the app running.

Creating a Sign-Up Screen

We'll start by creating a page for the guest users to sign up. Navigate to AngularJS_Firebase_Part1/app and create a folder called register. Inside the register folder, create register.html and register.js files. Here is how register.html looks: 

As seen in the above HTML code, we have used Bootstrap for our HTML design.

Inside register.js, we'll declare the routes for the application to access the register view. $routeProvider has a method called when, which we'll use to create a route for our register view. When defining a new route, we'll set a templateUrl which would be rendered in the index.html. Along with that, we'll also set a controllerfor the newly created $scope of the register view. A controller is a logic which controls a particular view. Here's how it should look:

Now open up app.js and include the register module myApp.register in the app.

To display the sign-up page, we need to include register.js inside the main HTML template file of the app. Open up index.html and include the following:

Restart the server and point your browser to http://localhost:8000/app/index.html#/register and you should see the sign-up screen:

Sign-up screen for AngularJS  Firebase App

Next, let's make the sign-up screen link to the sign-in screen. In home.html and register.html there is a sign up and sign in href respectively. We'll set both the href sources so that they are accessible from both the pages.

In home.html:

In the register.html:

Form Validation in AngularJS

When a user enters his or her email address and password on the registration screen, we need to validate a few things. First, the email id entered should have a valid email id format, and secondly the password entered should have a minimum length. 

AngularJS provides FormController, which keeps track of every element inside a form. From the AngularJS docs:

FormController keeps track of all its controls and nested forms as well as the state of them, such as being valid/invalid or dirty/pristine.

FormController has a few properties like $pristine, $dirty, $invalid, $valid, etc. We'll see what these properties are, and we will be using some of these properties to implement form validation for our registration page.

First, we need to modify our form HTML to add validation messages. In register.html modify the form HTML as shown.

Save the changes, restart the server, and refresh the register page. You should see a page like this:

AngularJS  Firebase App register page

Now, as we can see in the above screen, the validation messages are visible. We need to show them only when the email and password are not valid.

AngularJS provides a directive called ngShow to show HTML based on a certain expression. (An AngularJS directive is an extended HTML attribute provided by AngularJS to enhance the elements' capabilities.) So, we'll use ngShow to show the validation message when the input email has invalid data. But how do we know if the input email is invalid? Well, remember the FormController properties that we discussed earlier. FormController has a property called $invalid which is True if a control is invalid.$invalid would be true if the email entered is not a valid one. So we'll use $invalid and ngShow to show the validation message. Modify the email message span as shown below:

Save the changes, restart the server, and browse to the registration page. You'll see that the validation message for email id doesn't show any longer. Now, try to enter some data into the input email and the error message will pop up. Try entering a valid email address and the validation message will be gone. But the message for the password minimum length still shows up, initially. Let's fix it up.

AngularJS provides another directive called ng-minlength to set the minimum length for any input control. We'll use that to set the minimum length for the password field and then use ngShow to show/hide the validation message. Modify the password field to include the ng-minlength directive as shown:

Next modify the validation message span for the password field as shown:

So, if the minimum length of the password field is not as per the minimum length set in the password input field, then regForm.password.$error.minlength will be set to "true" and the validation message will be shown.

Save all the changes, restart the server, and browse to the registration page. Try entering a value for password, and the validation message will show up until the password length is 8.

Now, in order to highlight the invalid input elements, we can use some styles. Using an AngularJS directive called ngClass we can dynamically highlight the faulty input elements using the $invalid property. So add the ngClass directive to the parent div of the email and password elements. 

Save the changes, restart the server, and try browsing to the registration page. Now, on invalid entries, the validation messages show up as below:

Validation messages showing on registration page

Now, as you can see in the above screen, on validation errors the Register button is enabled. Let's make it disabled unless the email and password entered are valid. AngularJS provides a directive called ngDisabled which helps to disable elements based on an expression. If email and password are validated then the and user.password models will be set. So, we'll use these two objects to enable/disable the register button using ngDisabled. Modify the register button HTML as shown:

As you can see, ng-disabled will be true if or user.password is not false, which will be the case only when the data is invalid.

Save all the changes, restart the server, and refresh the registration page. As you'll notice, the Register button is disabled and it will remain so, until a valid email address and password are entered.

Registration screen with Register button disabled

Validating Sign-In Screen

Implementing validation on the sign-in screen is quite similar to the way we did it for the sign-up screen. I would suggest that you implement validation yourself for the sign-in screen as an exercise. In case you get stuck, have a look at the modified HTML code for the sign in form in home.html as shown below:

Wrapping It Up

In this part of the tutorial, we created the sign-up page and set up the routes for it. We also saw how to implement validations using AngularJS for the sign-up page.

In the next part, we'll focus on implementing the sign-up functionality and a few other features. Source code from the above tutorial is available on GitHub.

Do let us know your thoughts in the comments below!



Related Articles