Create Angular Form

to create the Angular form, you have to use the below step.

Step1:- Firstly import FormsModule, ReactiveFormsModule in the app.module.ts file.

import { FormsModule, ReactiveFormsModule} from '@angular/forms';

Now, include modules into imports array.

  imports: [

Step2:- Now, add HTML content in the add-employee.component.html file, which is view on the browser.
I have created a form that has three input fields like employee first name, employee last name and employee department after that created a submit button.

Note:- I have created reactive form and used formGroup to represent the form Name, formControlName used for the form field which is bind the form field value.

<div align="center" style="width:50%">
<h4>Create Employee</h4>

<form [formGroup]="addEmpForm" (ngSubmit)="onEmpSubmit()"  novalidate autocomplete="off">

    <div class="input-item">
     <input type="text" formControlName="empFirstName" placeholder="Employee First Name" class="input-bordered form-control">

    <div class="div-gap"></div>

    <div class="input-item">
        <input type="text" formControlName="empLastName" placeholder="Employee Last Name" class="input-bordered form-control">

    <div class="div-gap"></div>

    <div class="input-item">
        <input type="text" formControlName="empDepart" placeholder="Employee Department" class="input-bordered form-control" >

    <div class="div-gap"></div>

    <div class="gaps"></div>
    <div class="d-flex justify-content-between align-items-center">
     <button type="submit"  name="emp_sub" class="sub-button">Create</button>


Step3:- Now, css content added in the add-employee.component.scss file

    border-radius: 4px;
    border: 2px solid #d3e0f3;
    width: 100%;
    padding: 10px 15px;
    line-height: 20px;

.sub-button{ border-radius: 4px; background-color: blue; padding: 10px;}

Step4:- This file is used to implement Businees logic.

FormBuilder is used to bind the form value and you can perform any action in the onEmpSubmit() function.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
  selector: 'app-add-employee',
  templateUrl: './add-employee.component.html',
  styleUrls: ['./add-employee.component.scss']
export class AddEmployeeComponent implements OnInit {

  addEmpForm: FormGroup;

  constructor(private fb: FormBuilder){}

  ngOnInit(): void {
    this.addEmpForm ={
      empFirstName: [''],
      empLastName: [''],
      empDepart: ['']



    // perform an action like hit the backend API



Note:- Now, you can see the screen, user filled the form value and click on submit button then show value into console.