Appery.io

The Appery.io Developer Hub

Welcome to the Apperyio developer hub. You'll find comprehensive guides and documentation to help you start working with apperyio as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    

Ionic 4 Login Form with Validation Tutorial

Introduction

In this tutorial, we will demonstrate how you can create an Ionic 4 app where the Login form with validation is used.

Downloads and Resources

You can also try it yourself by creating from the backup:

  1. Download the app backup file.
  2. Click Create new app.
  3. Click From backup and select the project backup file on your drive.
  4. Type in the app name.
  5. Click Create:
Creating from backup

Creating from backup

But if you are interested in the detailed tutorial, please follow the tutorial steps below.

Creating UI

  1. Navigate to the Appery.io dashboard. Here, from the Apps tab, click Create new app.
  2. Select the Ionic 4 application for its type and Blank as a template. Name it formWithValidation and confirm by clicking Create:
Creating a new app

Creating a new app

  1. Clicking the cog icon, rename Screen1 to loginPage:
Renaming **Screen1** to **loginPage**

Renaming Screen1 to loginPage

  1. Click Create new > Page and name it welcome:
Creating a new page - **welcome**

Creating a new page - welcome

It's time that we can proceed to define both pages' appearance.

Defining loginPage UI

  1. Open the DESIGN tab of loginPage.
  2. Expand the OUTLINE tab (on the left), select Page, then, under the PROPERTIES tab, set the Header and Footer properties to False:
Disabling **Header** and **Footer**

Disabling Header and Footer

  1. Then, drag & drop an Image component from the PALETTE - it will be our Logo, and a Card component to the page that will be defined to the Login form.

Defining App Logo

  1. Collapse the page OUTLINE tab, then select the Image component and, under the PROPERTIES tab, define them as follows:
    • Class: login-logo;
    • Responsive: True:
**Image** component

Image component

  1. Then, for the Image property, click the Change button: this will open the Media Manager. Click Upload file and upload your own logo (it should be prepared beforehand), Go back to the list, select the uploaded image and click Apply:
Working with **Media Manager**

Working with Media Manager

  1. Now, place a Text component inside CardItemTitle, set its Container property to h1and enter Log In to Your Account! for the Text property. Inside the Card Item, clear the Text field:
  1. Open the SCSS tab (on the left) and add the class for your logo by inserting the following code:
.login-logo {
	display: block;
	margin: 0 auto;
	width: 150px;
	height: 150px;
	margin-top: 45px;
}

Here is how it should look like:

Adding **Logo** class

Adding Logo class

Defining App Form

  1. Go back to the DESIGN tab and drag & drop two Input components and a Button component inside the previously added Card component (you can check it under the OUTLINE tab):
Defining **Card** component

Defining Card component

  1. Select the first Input component, expand its Icon property, from the dropdown, select success for Color and set its Slot to Start; then click the No icon button and select the mail icon for Style.
  2. Now, expand the Label property and clear its Text field.
  3. Then, insert Enter your email for the Placeholder property, select Required to true, Type to Email and add an [(ngModel)] = email:
Defining **Input1**

Defining Input1

  1. Now, select the second Input component, expand its Icon property, from the dropdown, select success for Color and set its Slot to Start; then click the No icon button and select the lock icon for Style.
  2. Now, expand the Label property and clear its Text field.
  3. Then, insert Enter your password for the Placeholder property, select Required to true, Type to Password and add an [(ngModel)] = password:
Defining **Input2**

Defining Input2

  1. Select the Button component, from the dropdown, select success for Color, then set its Expand property to Block, Shape to Round, and Text to Log In:
Defining **Button**

Defining Button

  1. Expand the EVENTS panel below:
Expanding **EVENTS** panel

Expanding EVENTS panel

  1. For the Button component, select Click as an event, insert the TypeScript below (select the Run TypeScript action), and save.
const isValid = this.registeredUsers.some(user => user.email === this.email && this.password === user.password);
if (isValid) {
    const username = this.registeredUsers.find(user => user.email === this.email).username;
    this.Apperyio.getController("LoadingController").create({
        message: 'Please wait...',
        spinner: 'crescent',
        duration: 2000
    }).then(loading => loading.present()).then(() => {
        Swal.fire({
            title: 'Great!',
            text: 'Login success!',
            icon: 'success',
            confirmButtonText: 'ok'
        })

        this.Apperyio.navigateTo("welcome", username /*, optional, params, here */ );

    });
} else {
    Swal.fire({
        title: 'Error!',
        text: 'Your password or login is not correct',
        icon: 'error',
        confirmButtonText: 'Try again!'
    })
}

Here is how it should look like:

Defining **Button** event

Defining Button event

Defining welcome Page UI

  1. Go to the welcome page, expand the OUTLINE tab, select Page, then, under the PROPERTIES tab, set its Footer to False, and confirm.
  2. Then, select the HeaderToolbar Title and insert Hello, {{username}}! for the Text property. Drag & drop a Button inside the Toolbar Button (on the left) and set its Color to success, Component to Ionic Menu Button:
Defining **Header Toolbar Button**

Defining Header Toolbar Button

  1. Drag & drop another Button to the Toolbar. This should be defined as follows:
    • Clolor: success;
    • Component: Ionic Button;
    • Slot: Primary.
  2. Now, expand the Icon property and select the log-out icon for its Style property, set Slot to Icon Only and clear the Text field:
Defining **Sign Out** button

Defining Sign Out button

  1. To finish with this button, expand the EVENTS panel and, from the dropdown, select Navigate to page for its action with loginPage as its route, and save:
Setting **Button** navigation route

Setting Button navigation route

  1. Now, select the Page component, set Before page showing for Event and Run TypeScript for Action. From the drop-down, select the snippet Get route parameter and save:
Defining **Page** event

Defining Page event

  1. Click the green pencil button to get to the code editor and change let paramName to this.username and paramName to id. Don't forget to save:
Modifying **Page** event code

Modifying Page event code

Defining App Logic

  1. Go to Routing and add the welcome page path, for example: welcome/:id:
Defining app routing

Defining app routing

  1. Switch to Project > App settings > Npm modules and add a Dependency: sweetalert2 of version 9.7.1.
Adding dependency

Adding dependency

  1. Open the LoginPage CODE tab of and, under the Variables tab, add three variables of String type: username, email, and password and one of Any type: registeredUsers. Let's also add some values for the email and password variables (here, '[email protected]' and 'ILoveHarryPotter' - you can use the credentials to test the app):
Defining **LoginPage** variables

Defining LoginPage variables

  1. To add information about our users, switch to the Functions tab and add a new function, constructor and define it with the following code:
this.registeredUsers = [
    {
        username: "Ginny Weasley",
        email: "[email protected]",
        password: "ILoveHarryPotter"
    },
    {
        username: "Hermione Granger",
        email: "[email protected]",
        password: "ILoveHarryPotter"
    },
    {
        username: "Cho Chang",
        email: "[email protected]",
        password: "ILoveHarryPotter"
    },
]
  1. Now, go to the Split tab and add Swal with path sweetalert2 to the Custom includes section:
Adding **Custom includes**

Adding Custom includes

  1. Now, let's switch to the welcome page CODE tab and add a variable of String type: username:
Adding **welcome** page variable

Adding welcome page variable

Finishing Touches

You might also like to beautify your app UI:
To do it, add the below code to the SCSS tab of loginPage:

ion-content {
  --background: no-repeat center/cover url("http://youthconnekt.in/logo/bkimg12.jpg");
}

The tab should look like this:

Modifying SCSS of **loginPage**

Modifying SCSS of loginPage

Similarly, add the below code to the SCSS tab of the welcome page:

ion-content {
    
   --background: no-repeat center/cover url("http://youthconnekt.in/logo/bkimg12.jpg");
    // --transition: background-color, opacity 50ms linear;
}

Testing your app

Now, you can test your app work using the credentials provided when defining the app logic in Step 3: for the email, enter [email protected], for the password - ILoveHarryPotter:

App testing

App testing

Updated 9 days ago

Ionic 4 Login Form with Validation Tutorial


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.