How to initialize reactive form? angular basic
Jun 26, 2023
- Import Reactive Form module
- In Component create the form in ts class file
- 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>