FormGroup is used to group form controls.
Before starting with FormGroup you must know what is FormControl
In a form you can either group some FormControls or entire controls in the form.
When you need to group entire form?
Two Scenarios,
1) For example, When you submit the form, you can make the entire form invalid when any of the formcontrol is invalid.
2) If we wont to make the entire form as ready only after you submitted the changes in previuos step and it can be available for you to review in the next step.
Using a form control we can validate only a single control. A FormGroup can validate a group of FormControls.
In this code, submit button is disabled in HTML template using !reactiveForm.valid. If any of the control is invalid the whole form group will be invalid and submit button will be disabled. Submit button will be enabled only if all the controls are valid.
reactiveform.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-reactiveform',
templateUrl: './reactiveform.component.html',
styleUrls: ['./reactiveform.component.scss']
})
export class ReactiveformComponent {
reactiveForm = new FormGroup({
name: new FormControl('', [Validators.required]),
id: new FormControl('', Validators.required),
phone: new FormControl('',[Validators.required,Validators.maxLength(10)]),
});
get f(){
return this.reactiveForm.controls;
}
getValue(){
console.log('name:'+this.reactiveForm.controls.name.value);
}
resetForm(){
this.reactiveForm.reset({name: '', email: '', body: ''});
}
submit() {
console.log('Form Status:'+this.reactiveForm.status)
this.getValue();
if(this.reactiveForm.status === 'VALID'){
console.log(this.reactiveForm.value);
}
}
}
reactiveform.component.html
<div class="container">
<div class="row">
<form [formGroup]="reactiveForm" (ngSubmit)="submit()" class="col-xs-3">
<div class="form-group">
<label for="name">Name</label>
<input
type="text"
formControlName="name"
id="name"
class="form-control">
<div *ngIf="f.name.touched && f.name.invalid" class="alert alert-danger">
<div *ngIf="f.name.errors.required">Name is required.</div>
</div>
</div>
<div class="form-group">
<label for="id">Id</label>
<input
type="text"
formControlName="id"
id="id"
class="form-control">
<div *ngIf="f.id.touched && f.id.invalid" class="alert alert-danger">
<div *ngIf="f.id.errors.required">Id is required.</div>
</div>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input
type="text"
formControlName="phone"
id="phone"
class="form-control">
<div *ngIf="f.phone.touched && f.phone.invalid" class="alert alert-danger">
<div *ngIf="f.phone.errors.required">Phone is required.</div>
<div *ngIf="f.name.errors.maxlength">Phone should be 10 Digits.</div>
</div>
</div>
<button class="btn btn-primary mr-1" type="submit" [disabled]="!reactiveForm.valid">Submit</button>
<button class="btn btn-info" type="button" (click)="resetForm()">Reset Form</button>
</form>
</div>
</div>
Below picture shows when entire form is invalid, the submit button is disabled.
FormGroup has various methods which will be explained in another post.