10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

TASK 7 : Create an Reactive form for User Registration using Angular

for Online Exam portal.
Aim:
To create a reactive form for user registration using angular for online exam.
Procedure:
HOW TO RUN ANGULAR JS

1. Check Your Node.js and npm Versions

First, check your current Node.js and npm versions to ensure you're aware of what you're
working with. In Command Prompt or PowerShell, run:

2. Install Angular CLI

The Angular CLI is a powerful command-line interface tool that helps streamline Angular
development. Install it in your program folder by moving in your program folder by using cd
command:

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.1
 10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

3. After installing, You will get a message as updated 1 package

4.
Check the installed Angular version, the version will display:

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.2
 10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

5. Create a New Angular Project named “Reactive” with the Installed CLI

6. Follow the prompts, and once the project is created, you can start the
development server by moving in the folder and using ng serve:

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.3
 10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

Once the server starts, the Angular live development server will start.

7. Open Your Web Browser:

Once the server is running, you can view your application by opening your browser and
navigate using http://localhost:4200.

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.4
 10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

If server at http://localhost:4200/ is running, it means your Angular

project is already set up and running.
8. Steps to Run and Develop Your Angular Project:
 Open the Project in a Code Editor:
o Open your Angular project folder (Reactive) in a code editor like Visual
Studio Code.
This is where you will modify files and build components, services, and other Angular
features.

The key files in src folder are:

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.5
 10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

 src/app/: This is where your Angular components, services, and other

application logic reside.
 src/app/app.component.ts: This is the root component of your Angular
app.
 src/app/app.module.ts: This is the main module that bootstraps your
application.
 src/index.html: The main HTML file where your app is rendered.

9. Change the Template (HTML) app.component.html :

Open C:\task7\Reactive\src\app\app.component.html, which

defines the view (HTML) of your root component. The HTML file defines the structure
of the user registration form, using Angular's reactive form directives like
formControlName and formGroup for managing input fields.

 formGroup: Binds the form to the reactiveForm group defined in

app.component.ts.
 formControlName: Associates each input with a specific form control (e.g.,
firstaname, lastaname, email).
 Submit Button: Calls the onSubmit() function when the form is submitted.

For example, you might see:

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.6
 10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

Type the following code in app.component.html

<div class ="form">
<h2 id="registration"> User Registration Form</h2>
<form [formGroup]="reactiveForm" (ngSubmit)="onSubmit()">
<label for="fname"> First Name </label>
<input type="text" id="fname" placeholder="Enter your first name"
formControlName="firstaname">
<br>

<br>
<label for="lname"> Last Name </label>
<input type="text" id="lname" placeholder="Enter your last name"
formControlName="lastaname">
<br>

<br>
<label for="email"> Email ID </label>
<input type="email" id="email" placeholder="Enter your last email"
formControlName="email">
<br>

<br>
<label for="country">Country</label>
<select id="country" formControlName="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa" selected>USA</option>
</select>
<br>
<br>
<label for="gender">Gender</label>
<input type="radio" id="male" value="male" formControlName="gender">
<label for="male">Male</label>
<input type="radio" id="female" value="female"
formControlName="gender">
<label for="male">Female</label>
<br>
<br>
<label>Hobbies</label>
<div class="form-inline">
<label><input type="checkbox" value="sports" checked
formControlName="hobbies">Sports</label>
<label><input type="checkbox" value="movies" formControlName="hobbies"
>Movies</label>
<label><input type="checkbox" value="music" formControlName="hobbies"
>Music</label>
</div><br>
<input type="submit" value="Submit" id="btn">

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.7
 10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

</form>

10. Add the styles of the HTML page by typing the following code in
app.component.css
input[type=text],[type=email],select{
width:100%;
padding:12px 20px;
margin:8px 0;
display:inline-block;
border:1px solid #ccc;
border-radius:4px;
box-sizing:border-box;
}

input[type=submit]{
width:100%;
background-color:#4CAF50;
color:white;
padding:14px 20px;
margin:8px 0;
border:none;
border-radius:4px;
cursor:pointer;
}
input[type=submit]:hover{
background-color:#45a049;
}
.form{
border-radius:5px;
background-color:#f2f2f2;
padding:20px;
width: 420px;
margin:10px auto;
}

The output will come like this:

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.8
 10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

11. Modify app.component.ts and include the following code to make

Changes:
This file contains the TypeScript code for managing form controls and validation
logic.
import { Component,OnInit } from '@angular/core'; //INCLUDE THIS LINE
import { FormControl, FormGroup } from '@angular/forms';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'Reactive';

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.9
 10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

reactiveForm:FormGroup; //INCLUDE THIS LINE

ngOnInit(){ //INCLUDE ALL THE LINES

this.reactiveForm=new FormGroup({
firstaname:new FormControl(null),
lastaname:new FormControl(null),
email:new FormControl(null),
gender:new FormControl('male'),
country:new FormControl('canada'),
hobbies:new FormControl(null),
});
}
onSubmit(){ //INCLUDE ALL THE LINES
console.log(this.reactiveForm.value);
}
}

 FormGroup and FormControl: These classes are used to create and manage
the form controls programmatically.
 ngOnInit(): Initializes the form and its fields when the component is loaded.
 onSubmit(): This function gets triggered when the form is submitted, and the
form data is logged to the console.

12. Change the Main module by changing App.module.ts:

This file is the main module of the Angular app, and it configures the
application to use reactive forms by importing the necessary modules.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms'; //INCLUDE THIS LINE

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule //INCLUDE THIS LINE

],
providers: [],
bootstrap: [AppComponent]

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.10
 10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

})
export class AppModule { }
 ReactiveFormsModule: This module enables the use of reactive forms in
Angular. It must be imported to use FormGroup, FormControl, and other
reactive form features.
 BrowserModule: The basic Angular module required for any web app.

13. Finally change the the value in tsconfig.json as strict:false:

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.11
 10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

After entering the inputs the final output gets reflected in the console as,

Result :

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.12
 10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

Thus the above program was executed and output was verified successfully.

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.13