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.