Reactive Forms

  1. import { FormGroup, FormArray , FormControl, FormBuilder } from '@angular/forms';
FormArray is similar to an array. We can push the new items into it and loop throughout items to append in HTML.
Sometimes, we need to give control creation logic to the end users as per their capabilities and skills or experience.

For example (Degrees)

Therefore, we need an additional field as per the qualification and experience. In this demo, I’m creating additional fields for education and other fields by clicking on “Add Other Details”. This is a continuation of my last blog on Angular version 7.

Creating Form Controls Dynamically in Angular 7
This is a basic form with some fields with "Add Other Details" button. In this below screen, I clicked "Add other details" and it generated the same fields to capture additional details as below.
Creating Form Controls Dynamically in Angular 7
Let's see the "Add Other Details" ClickEvent.
Step 1
Create a personal details form on initialization.
  1. ngOnInit() {
  2. this.personalForm = this.formBuilder.group({
  3. firstName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(8)]],
  4. lastName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(8)]],
  5. address: ['', [Validators.required]],
  6. other: this.formBuilder.array([ this.addOtherSkillFormGroup()])
  7. });
  8. }
Step 2
Create a method which returns control objects.
  1. addOtherSkillFormGroup(): FormGroup {
  2. return this.formBuilder.group({
  3. education: ['', Validators.required],
  4. age : ['', Validators.required],
  5. degree: ['Bachelor', Validators.required]
  6. });
  7. }
Step 3
Here is the button click event code.
  1. addButtonClick(): void {
  2. (<FormArray>this.personalForm.get('other')).push(this.addOtherSkillFormGroup());
  3. }
Step 4
This code contains the HTML changes to loop a FormArray,
  1. <div style="background-color: gainsboro">
  2. <div class="form-group">
  3. <div class="col-md-offset-2 col-md-4">
  4. <button type="button" class="btn btn-primary" (click)="addButtonClick()">
  5. Add Other Details
  6. </button>
  7. </div>
  8. </div>
  9. <div formArrayName="other" *ngFor="let other of personalForm.get('other').controls; let i = index" class="form-group">
  10. <div [formGroupName]="i">
  11. <div class="form-group" class="row cols-md-12">
  12. <label class="col-sm-2 control-label" for="education">
  13. Other
  14. </label>
  15. <div class="col-sm-4">
  16. <input type="text" class="form-control" id="education" placeholder="Education" formControlName="education">
  17. </div>
  18. <div class="col-sm-4">
  19. <input type="text" placeholder="Age" class="form-control" formControlName="age">
  20. </div>
  21. </div>
  22. <br>
  23. <div class="form-group" class="row cols-md-12">
  24. <label class="col-md-2 control-label">Degree Type</label>
  25. <div class="col-md-8">
  26. <label class="radio-inline">
  27. <input id="degree" type="radio" value="Bachelor" formControlName="degree">Bachelor
  28. </label>
  29. <label class="radio-inline">
  30. <input id="degree" type="radio" value="Master" formControlName="degree">Master
  31. </label>
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. </div>
Github Complete Code