Ionic 4 Login Form and Getting Textbox Value Updated FREE
Ionic 4 Login Form and Getting Textbox Value
In this tutorial, we'll larn how to use Angular forms in Ionic 5 by building a simple login and registration example with theming.
In the previous tutorial, we've created a JWT authentication server with Node and Limited.js and implemented an authentication service with Angular services and HttpClient in our Ionic 5 application.
Check out the previous tutorial: Ionic 5 JWT Authentication Tutorial: Using Angular HttpClient with Node & Express.js Server
Creating an Ionic 5 UI past Example
In this function, we'll create the actual UI with built-in Ionic 5 components and Athwart forms.
We'll be using Ionic v components such as the Ionic Grid, Input fields and Buttons.
We'll also see how to use some CSS variables like --groundwork and --colour for custom theming the UI components and the color holding of Ionic components to assign unlike types of standard Ionic colors such as the chief and secondary colors to the components.
We'll see how to use Angular routing to navigate between dissimilar pages of our Ionic 5 application.
We've created an Ionic 5 project, created a module that encapsulates authentication and created a service that implements the register(), login(), logout() and isLoggedIn() methods. Allow's at present create the UI pages and components.
Creating the Annals Page
Head back to your terminal and run the post-obit command to generate a annals folio within the auth module:
$ ionic generate page auth/register This volition create the following files:
-
src/app/auth/register/register.module.ts, -
src/app/auth/register/register.page.scss, -
src/app/auth/register/annals.page.html, -
src/app/auth/register/annals.page.spec.ts, -
src/app/auth/register/register.page.ts
It will too update the src/app/app-routing.module.tsfile to enable routing to this page by calculation the following route:
{ path : 'register' , loadChildren : './auth/annals/register.module#RegisterPageModule' }, This means, you can access the registration page http://localhost:8100/register.
Open the src/app/auth/annals/register.folio.ts file and import then inject AuthService and Router:
import { Component , OnInit } from '@angular/cadre' ; import { Router } from "@athwart/router" ; import { AuthService } from '../auth.service' ; @ Component ({ selector : 'app-register' , templateUrl : './register.page.html' , styleUrls : [ './register.page.scss' ], }) consign class RegisterPage implements OnInit { constructor ( individual authService : AuthService , private router : Router ) { } ngOnInit () { } } Next, add the register() method that will be chosen for registering users:
register ( course ) { this . authService . annals ( class . value ). subscribe (( res ) => { this . router . navigateByUrl ( 'dwelling' ); }); } This method simply calls the register() method of AuthService, subscribe to the returned Observable and navigate to the home page when registration is done.
We use the navigateByUrl() method of the Angular Router to navigate to a page by its URL.
The register() method takes an Angular form object. The value variable contains a JS object that corresponds to the fields of the class and their values.
Next open up the src/auth/register/annals.page.html file and add a class within <ion-content>:
<ion-content color= "master" > <class # form= "ngForm" ( ngSubmit )=" annals ( form )" > <ion-grid> <ion-row color= "principal" justify-content-center > <ion-col align-self-middle size-md= "6" size-lg= "v" size-xs= "12" > <div text-center > <h3>Create your account!</h3> </div> <div padding > <ion-detail> <ion-input name= "proper name" type= "text" placeholder= "Name" ngModel required ></ion-input> </ion-particular> <ion-particular> <ion-input name= "email" type= "electronic mail" placeholder= "your@e-mail.com" ngModel required ></ion-input> </ion-item> <ion-item> <ion-input name= "password" type= "countersign" placeholder= "Password" ngModel required ></ion-input> </ion-item> <ion-item> <ion-input name= "confirm" blazon= "password" placeholder= "Countersign again" ngModel required ></ion-input> </ion-item> </div> <div padding > <ion-button size= "large" type= "submit" [ disabled ]=" form . invalid " aggrandize= "block" >Register</ion-button> </div> </ion-col> </ion-row> </ion-filigree> </form> </ion-content> We assign the primary Ionic color to <ion-content> and <ion-row> components.
Next, allow's add some styling. Open the src/auth/register/register.page.scss file and add together:
ion-detail { --groundwork : #3880ff ; --color : #fff ; } ion-button { --background : #062f77 ; } We use the --background and --colour variables to alter the colors of <ion-item> and <ion-button> components.
This is the screenshot our registration page:
Creating a Login Page
Next, let's create a login page. In your last, run the following control:
$ ionic generate folio auth/login The post-obit files will exist created:
-
src/app/auth/login/login.module.ts, -
src/app/auth/login/login.folio.scss, -
src/app/auth/login/login.page.html, -
src/app/auth/login/login.folio.spec.ts, -
src/app/auth/login/login.page.ts
The src/app/app-routing.module.ts will be updated with the following road:
{ path : 'login' , loadChildren : './auth/login/login.module#LoginPageModule' }, The loadChildren holding is used to lazy load the login module.
Now, open up the src/app/auth/login/login.folio.ts file, import and inject both AuthService and Router:
import { Component , OnInit } from '@athwart/core' ; import { Router } from "@athwart/router" ; import { AuthService } from '../auth.service' ; @ Component ({ selector : 'app-login' , templateUrl : './login.page.html' , styleUrls : [ './login.page.scss' ], }) export form LoginPage implements OnInit { constructor ( private authService : AuthService , private router : Router ) { } ngOnInit () { } } Next, add the login() method:
login ( form ){ this . authService . login ( form . value ). subscribe (( res ) => { this . router . navigateByUrl ( 'home' ); }); } The login() method simply calls the login() method of AuthService and subscribe to the returned Observable then navigate to the abode page when login is done.
Permit's now create the login UI. Open the src/app/auth/login/login.page.html file and add the post-obit code:
<ion-content color= "master" padding > <class # form= "ngForm" ( ngSubmit )=" login ( form )" > <ion-grid> <ion-row color= "main" justify-content-heart > <ion-col align-self-center size-md= "6" size-lg= "5" size-xs= "12" > <div text-center > <h3>Login</h3> </div> <div padding > <ion-item> <ion-input name= "electronic mail" type= "e-mail" placeholder= "your@electronic mail.com" ngModel required ></ion-input> </ion-detail> <ion-detail> <ion-input proper noun= "password" blazon= "password" placeholder= "Password" ngModel required ></ion-input> </ion-item> </div> <div padding > <ion-push size= "large" type= "submit" [ disabled ]=" form . invalid " aggrandize= "block" >Login</ion-push> </div> </ion-col> </ion-row> </ion-grid> </course> </ion-content> Nosotros use the Ionic Filigree to place the form elements.
Open up the src/app/auth/login/login.page.scss file and add these styles:
ion-item { --groundwork : #3880ff ; --color : #fff ; } ion-button { --background : #062f77 ; } Next, let's add a link to the register folio to permit users to register if they don't already have an account. Inside the <ion-grid> component add:
<ion-row> <div text-centre > If y'all don't accept an account, please <a routerLink= '/register' > register</a> outset! </div> </ion-row> We utilize the routerLink directive of Athwart Router to create a link to the register page.
In the src/app/auth/login/login.folio.scss file, add:
This is a screenshot of the login folio:
Conclusion
That's it nosotros take created our login and registration system using Ionic 5 and Angular 7 in the front-cease and Node, Express.js in the backend.
Ionic 4 Login Form and Getting Textbox Value
DOWNLOAD HERE
Source: https://www.techiediaries.com/ionic-ui-forms-theming/
Posted by: blizzardthignot.blogspot.com