Scribd
Upload
4 views17 pages

Day 3

The document outlines the steps to create and implement a login and registration module in an Angular application, including routing setup and form handling. It details the creation of a registration form with validation, including password matching, and how to connect the form to the component using FormBuilder. Additionally, it explains the necessary imports and modifications to ensure proper rendering and functionality of the authentication features.

Uploaded by

mayankgopal2004
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views17 pages

Day 3

The document outlines the steps to create and implement a login and registration module in an Angular application, including routing setup and form handling. It details the creation of a registration form with validation, including password matching, and how to connect the form to the component using FormBuilder. Additionally, it explains the necessary imports and modifications to ensure proper rendering and functionality of the authentication features.

Uploaded by

mayankgopal2004
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Day 2

Create new components in auth module i.e. login and registration

Add route of the auth module to in the app routing

It will load auth module in the browser


But it is not displaying on the page
So we need to add <router-outlet> tag for it in the app.component.html file
Till now we have loaded the module but not render the page on it. For that we need to add
route in the auth.routing file.

Now try to render the login page


Now add register page route in the auth-routing file too.
But landing page is not visible due to <router-link> tag. So need to add route for the landing
page in the app-routing file
Now it is visible

Now you can click on the login and registration button to redirect to the page. But it will load
complete page every time you click on the link. So we need to add Routerlink tag in the
header folder

Also import routing module in the core module


Now it will load the selected part.
Now add code for registration in register
<section class="container">
<h1 class="large text-primary">Sign Up</h1>
<p class="lead"><i class="fas fa-user"></i> Create Your Account</p>
<form class="form" action="">
<div class="form-group">
<input type="text" placeholder="Name" name="name" />
</div>
<div class="form-group">
<input type="email" placeholder="Email Address" name="email" />

<small class="form-text"
>This site uses Gravatar so if you want a profile image, use a Gravatar
email</small
>
</div>

<div>
<div class="form-group">
<input type="password" placeholder="Password" name="password" />
</div>
<div class="form-group">
<input
type="password"
placeholder="Confirm Password"
name="confirmPassword"
/>
</div>
</div>

<input type="submit" class="btn btn-primary" value="Register" />


</form>
<p class="my-1">Already have an account? <a href="login.html">Sign In</a></p>
</section>

Angular use its own form. So to add it you need to import formsModule in auth.module.ts
Now create the formBuider object in the register.component.ts
FormBuilder is used to store the form. It act like container for it.
You going to need constructor to use it

Now create the formGroup object and use it inside the constructor.
Connect form group with html page by form group directives
For this replace the “action” part with [formGroup]="registerForm"

Form group specification is available in reactiveFormsModule


So import it
Now create the variable in register.component.ts and connect it to form in HTML file

In above case there are more than one validators (like required, minlength etc), so we have
created an array to store validators.
If there is only one validator, need to add validator only like
Name = [‘’, Validators.required]

Replace the “name” attribute of the input with formControlName=”name”


Similarly create variable for other
Update same in HTML file of register

But we need to verify the password and confirm password are matching or not
For that we will create util package and one file inside it
Write the code in passwordValidator.ts file

Now this custom validator need to apply in constructor of register.component.ts


Now need to add event function to perform the action after constructor

registerSubmit() {
if (this.registerForm.valid) {
//it will return true when all the validations are verified including
angular (length, reuqired, email) and custom (pasword matching)
console.log('Success' + this.registerForm.value);
//this will not be able to print the object, so write the following code
console.log('Success' + JSON.stringify(this.registerForm.value));
} else {
console.log(this.registerForm.errors);
//this.printErrors();
}
}

In HTML file of register, add (ngSubmit)="registerSubmit() in the form tag


This will call registerSubmit() function defined in the register.components.ts
Output:
Now you can check the output of the form in console of the browser
After submitting the all data having proper validation, you will be able to see the output in
console displaying successful submission of the form data.

You can also see the password mismatch error if you enter different password
When password matches but other data does not clear the validation, it shows null value in
the console.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy