Here we are going to see how to add and remove a FormControl Dynamically in FormGroup
In Angular FormGroup addControl and removeControl is used add and remove FormControl's dynamically.
For example a person has multiple address lines. Say Door Number is address line 1, street name is address line 2, etc.
On checking address option checkbox address line input is enabled.
addControl method accepts name, AbstractControl , options as parameters.
removeControl method accepts name and options as parameters. In this example options parmeter is excluded in both addControl and removeControl methods.
Formgroup addControl and removeControl method example
Typescript Component Class
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
reactiveFormGroup: FormGroup;
ngOnInit() {
this.reactiveFormGroup = new FormGroup({
name: new FormControl(),
addressOption1: new FormControl(false),
addressOption2: new FormControl(false)
});
this.addressOption1.valueChanges.subscribe(checked => {
if (checked) {
this.reactiveFormGroup.addControl('addressLine1', new FormControl());
} else {
this.reactiveFormGroup.removeControl('addressLine1');
}
});
this.addressOption2.valueChanges.subscribe(checked => {
if (checked) {
this.reactiveFormGroup.addControl('addressLine2', new FormControl());
} else {
this.reactiveFormGroup.removeControl('addressLine2');
}
});
}
get addressOption1() {
return this.reactiveFormGroup.get('addressOption1') as FormControl;
}
get addressOption2() {
return this.reactiveFormGroup.get('addressOption2') as FormControl;
}
get addressLine1() {
return this.reactiveFormGroup.get('addressLine1') as FormControl;
}
get addressLine2() {
return this.reactiveFormGroup.get('addressLine2') as FormControl;
}
}
HTML
<div class="container">
<form [formGroup]="reactiveFormGroup" class="col-xs-3">
<div class="row col-12 col-md">
<b class="mr-4">Name</b><input type="input" formControlName="name">
</div>
<div class="row mt-3 col-12 col-md">
<b style="width: 50px;">Address Line1</b> <input type="checkbox" formControlName="addressOption1" class="mr-3">
<input formControlName="addressLine1" placeholder="Address Line 1" *ngIf="addressLine1">
</div>
<div class="row mt-3 col-12 col-md">
<b style="width: 50px;">Address Line2</b> <input type="checkbox" formControlName="addressOption2" class="mr-3">
<input formControlName="addressLine2" placeholder="Address Line 2" *ngIf="addressLine2">
</div>
</form>
<div style="width: 200px;" class="mt-3">FormGroup Values: {{ reactiveFormGroup.value | json }}</div>
</div>
Tested Output