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.

@NgModule({
  imports: [
     FormsModule,
     ReactiveFormsModule,
  ]
  });

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>

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

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

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

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

    <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>
  </div>
</form>


</div>

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

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

.div-gap{height:20px;}
.sub-button{ border-radius: 4px; background-color: blue; padding: 10px;}
.invalid-feedback{color:#ff0000}

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';
@Component({
  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 = this.fb.group({
    
      empFirstName: [''],
      empLastName: [''],
      empDepart: ['']
 });
  }

  onEmpSubmit(){

    console.log(this.addEmpForm.value);

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