How to add dynamic fields in Angular 6

  • FormArray is one of the three basic building blocks to define forms in angular along with FormGroup, FormControl.
  • It works similar to FormGroup, where a FormArray status depends upon all its children status. That is if any one FormControl in FormArray is invalid then the status of the entire array becomes
  • A FormArray can hold any instances either it can be FormGroup, FormControl (or) even other
  • This is mostly used for adding dynamic controls in Reactive Forms.

Step1: Create a component

File: FormComponent.ts

Step2: Create a template

File: template.html

Step3: Adding FormsComponent in AppModule

File: app.module.ts

Step4: Bootstraping AppModule

File: main.ts

Step5: Creating Startup file. Add the required files for bootstrap in your directory.

File: index.html

Output: