Overview of Reactive Form in Angular

Reactive forms use model-driven technique to handle the form data b/w components and template and provide reactive patterns and validation to handil forms. Reactive forms use the form control objects to manupulate the forms. So u can create the form tree using the form control objects into the component and bind it from control to component template using formControl. Each Form element is an object of FormControl.

FormGroup -- FormGroup is a collection of FormControls with each control name as key.

FormArray -- the value is an array , the array of formControls.

FormControl -- the value is the string value or object ,it is the default value of form control.

First we need to import ReactiveFormsModule , FormGroup and FormControl in our AppModule.

Example >> Reactive form with 3 filds .

1 - Name

2 - Email

3 - Password

<form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm)">

<div>

<label> Name : </label>

<input type="text" name="firstname" formControlName="firstname">

</div>

<div>

<label> Email : </label>

<input type="text" name="email" formControlName="email">

</div>

<div>

<label> Password : </label>

<input type="password" name="password" formControlName="password">

<div>

<button type="submit" > Submit </button>

</form>

Component.ts

import {FormGroup , FormControl , FormArray ,NgForm } from '@angular/forms';

import { Component , OnInit } from '@angular/core';

@Component({

selector: ' ',

templateUrl : ' ',

})

export class AppComponent implements OnInit {

private userForm : FormGroup;

constructor(){ }

ngOnInit() {

this.userForm=new FormGroup({

'firstname' : new FormControl(),

'email' : new FormControl(),

'password' : new FormControl()

});

}

onSubmit(userForm : NgForm){

// Now from here we can call service or api to save data on server .

}

We are an ERP application development company that excels in building custom enterprise solutions from scratch for diverse business needs. Our team specializes in using open-source software platforms like Odoo, OFBiz, and ERPNext to develop scalable ERP applications with custom features. To learn more about our custom ERP software development services, contact us at [email protected].