How to initialize reactive form? angular basic

Anil Kumar
Jun 26, 2023

--

Photo by Nubelson Fernandes on Unsplash
  1. Import Reactive Form module
  2. In Component create the form in ts class file
  3. set input with formControl
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
imports: [
// other imports ...
ReactiveFormsModule
],
})
export class AppModule { }
// Main module
import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
detailsForm = new FormGroup({
name: new FormControl(''),
age: new FormControl(''),
});
}
<form [formGroup]="detailsForm">

<label for="name">First Name: </label>
<input id="name" type="text" formControlName="name">

<label for="age">Last Name: </label>
<input id="age" type="text" formControlName="age">

</form>

--

--

Anil Kumar
Anil Kumar

Written by Anil Kumar

Software Engineer| Angular Advocate | Cyclist

No responses yet