How to initialize reactive form? angular basic

Anil Kumar

·

Follow

Jun 26, 2023

--

Listen

Share

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>