How to Implement Angular Forms?
Last Updated :
21 May, 2024
Improve
Creating a Form in Angular includes the use of directives such as ngSubmit and ngModel. We will be using a functional component to render the elements. Various HTML elements are created in the project. To implement the project we will create the styling using CSS.
Prerequisites:
Approach
- Run ng new my-angular-form-project command to set up the react project.
- HTML From to create the form structure
- HTML Input of type text, textarea, number, radio, checkbox and add respective labels for the inputs.
- HTML Button for reset and submit actions.
- CSS class and properties to style the Form label, inputs and buttons.
Project Structure:
.png)
Steps to Create Angular Project
Step 1: Run the following command to install Angular CLI globally.
npm install -g @angular/cli@16.0.0Step 2: Go to Form directory and run this command to create angular project.
ng new my_angular_form_projectThe Updated Dependenices in the package.json file:
"dependencies":
{
"@angular/animations": "^16.0.0",
"@angular/common": "^16.0.0",
"@angular/compiler": "^16.0.0",
"@angular/core": "^16.0.0",
"@angular/forms": "^16.0.0",
"@angular/platform-browser": "^16.0.0",
"@angular/platform-browser-dynamic": "^16.0.0",
"@angular/router": "^16.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"
}
Step 3: Make changes to the project file according to give code example.
Example: To demonstrate creating an angular form.
<!-- /app/app.component.html -->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Form Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="FormController">
<div class="App">
<h1>Form in AngularJS</h1>
<fieldset>
<form (ngSubmit)="handleSubmit()">
<label for="firstname">First Name*</label>
<input
type="text"
name="firstname"
[(ngModel)]="formData.firstName"
placeholder="Enter First Name"
required
/>
<label for="lastname">Last Name*</label>
<input
type="text"
name="lastname"
[(ngModel)]="formData.lastName"
placeholder="Enter Last Name"
required
/>
<label for="email">Enter Email*</label>
<input
type="email"
name="email"
[(ngModel)]="formData.email"
placeholder="Enter email"
required
/>
<label for="contact">Contact*</label>
<input
type="tel"
name="contact"
[(ngModel)]="formData.contact"
placeholder="Enter Mobile number"
required
/>
<label for="gender">Gender*</label>
<input
type="radio"
name="gender"
value="male"
[(ngModel)]="formData.gender"
/>
Male
<input
type="radio"
name="gender"
value="female"
[(ngModel)]="formData.gender"
/>
Female
<input
type="radio"
name="gender"
value="other"
[(ngModel)]="formData.gender"
/>
Other
<label>Your best Subject</label>
<input
type="checkbox"
name="english"
[(ngModel)]="formData.subjects.english"
/>
English
<input
type="checkbox"
name="maths"
[(ngModel)]="formData.subjects.maths"
/>
Maths
<input
type="checkbox"
name="physics"
[(ngModel)]="formData.subjects.physics"
/>
Physics
<label for="url">Enter URL*</label>
<input
type="url"
name="url"
[(ngModel)]="formData.url"
placeholder="Enter url"
required
/>
<label for="about">About</label>
<textarea
name="about"
[(ngModel)]="formData.about"
placeholder="About yourself"
required
></textarea>
<button type="reset" (click)="resetForm()">Reset</button>
<button type="submit">Submit</button>
</form>
</fieldset>
</div>
</body>
</html>
<!--index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyAngularFormProject</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
/* //app/app.component.css */
body {
background: #f3f3f3;
text-align: center;
}
.App {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 10px 20px;
transition: transform 0.2s;
width: 500px;
text-align: center;
margin: auto;
margin-top: 20px;
}
h1 {
font-size: x-large;
text-align: center;
color: #327c35;
}
fieldset {
border: none;
}
input {
display: block;
width: 100%;
/* margin-bottom: 15px; */
padding: 8px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 3px;
font-size: 12px;
}
input[type="radio"],
input[type="checkbox"] {
display: inline;
width: 10%;
}
select {
display: block;
width: 100%;
margin-bottom: 15px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 5px;
}
label {
font-size: 15px;
display: block;
width: 100%;
margin-top: 8px;
margin-bottom: 5px;
text-align: left;
color: #555;
font-weight: bold;
}
button {
padding: 15px;
border-radius: 10px;
margin: 15px;
border: none;
color: white;
cursor: pointer;
background-color: #4caf50;
width: 40%;
font-size: 16px;
}
textarea {
resize: none;
width: 98%;
min-height: 100px;
max-height: 150px;
}
// app/app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, FormsModule],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'my-angular-form-project';
formData = {
firstName: '',
lastName: '',
email: '',
contact: '',
gender: 'male',
subjects: {
english: true,
maths: false,
physics: false
},
url: '',
about: ''
};
handleSubmit() {
console.log(this.formData);
// Add your form submission logic here
}
resetForm() {
this.formData = {
firstName: '',
lastName: '',
email: '',
contact: '',
gender: 'male',
subjects: {
english: true,
maths: false,
physics: false
},
url: '',
about: ''
};
}
}
//main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent)
.catch((err) => console.error(err));
To run this project:
npm startOutput: This output will be visible on localhost:4200/ on the browser window.
