How to Implement Angular Forms?

Last Updated : 21 May, 2024

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:

Steps to Create Angular Project

Step 1: Run the following command to install Angular CLI globally.

npm install -g @angular/[email protected]

Step 2: Go to Form directory and run this command to create angular project.

ng new my_angular_form_project

The 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.

HTML

<!-- /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>

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>

CSS

/* //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;
}

JavaScript

// 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: ''
    };
  }
}

JavaScript

//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 start

Output: This output will be visible on localhost:4200/ on the browser window.