FormControl is used to access the value and validate the state of the individual form control.
There are controls like Input, Dropdown, Button, Radio, Checkbox. For these controls we have to create a FormControl in TypeScript component.
Say if a control Input is used in HTML, an instance of FormControl should be created for it in the Component
For example in HTML template create an input for name
<input [formControl]="name">
where [formControl] is the directive of FormControl class.
In the component create a instance of FormControl for name.
name = new FormControl();
Through control we will bind name to the component FormControl with [formControl] directive.
Using FormControl we can apply validations to the HTML controls.
FormControl has all the information of the HTML form element (control).
You must also need to understand about FormGroup and FormArray to know more about Reactive Forms
The following example illustrates the various validations that can be applied to FormControl. For this first import the FormControl from '@angular/forms';
FormComponent class
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-reactiveform',
templateUrl: './reactiveform.component.html',
styleUrls: ['./reactiveform.component.scss']
})
export class ReactiveformComponent {
submitted: boolean;
name = new FormControl('', [Validators.required]);
id = new FormControl(370, Validators.required);
phone = new FormControl('12345678901',Validators.maxLength(10));
company = new FormControl({value: 'ABC', disabled: true});
email = new FormControl({value: '', disabled: true});
createEmail() {
this.email.setValue(this.name.value+'@abc.com');
console.log('Email:'+this.email.value);
}
submitForm() {
this.submitted = true;
this.createEmail();
}
}
FormComponent HTML template
<table>
<tr>
<th>Name</th><td><input [formControl]="name"></td>
</tr>
<tr>
<th>Id</th><td><input [formControl]="id"></td>
</tr>
<tr>
<th> Phone</th><td><input [formControl]="phone"></td>
<label *ngIf="phone.invalid" [ngClass] = "'error'"> Phone number should not exceed 10 digits. </label>
</tr>
<tr>
<th>Company</th><td><input [formControl]="company"></td>
</tr>
<tr>
<th>Email</th><td><input [formControl]="email"></td>
</tr>
</table>
<div>
<button (click)="submitForm()">Submit</button>
</div>
<div *ngIf="submitted==true">
<p> Result:</p>
<p>Name: {{ name.value }}, Status: {{ name.status }}</p>
<p>Id: {{ id.value }}, Status: {{ id.status }}</p>
<p>Phone: {{ phone.value }} , Status: {{ phone.status }}</p>
<p>Company: {{ company.value }} , Status: {{ company.status }}</p>
<p>Email: {{ email.value }} , Status: {{ email.status }}</p>
</div>
In AppModule import the following
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
In App Component html template call the reactive form component selector like below to render the ReactiveformComponent,
<app-reactiveform></app-reactiveform>
app-routing.module.ts
import { ReactiveformComponent } from './reactiveform/reactiveform.component';
const routes: Routes = [
{ path: 'formcontrolexample', component: ReactiveformComponent}
];
Output