Angular Form Array (Learn it in 11 Steps)

Please find the below steps to implement the Reactive Form Array in angular application

1. Create an angular project with the below command.

ng new angular-formarray-example

2. After successful creation of the angular app, change the file directory to project-name. by using the below command

cd angular-formarray-example

3. Open the project in vs code using “code .” or open with “vs code” after that run the project by using the “ng serve” command and Open the project in chrome using localhost:4200

4. Open the app component in vs code and remove the content which is created by angular CLI while creating the app.

5. Open the “app.module.ts” file in vs code by using Ctrl + P and add “ReactiveFormsModule”, and “FormsModule” in imports[].

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent,
    SignupComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

6. Open the “app.component.ts” file in vs code by using Ctrl + P and add “formbuilder” as a dependency in “constructor”.

public form:FormGroup;
constructor(private fb:FormBuilder) { }

7. Create a form variable above the constructor. Create formInit() method to initialize the form and call the method from either constructor or ngOnInit.

public form:FormGroup;
constructor(private fb:FormBuilder) { 
 this.formInit()
}
private formInit(){
}

8. And create form group using form builder and also added skills as formArray inside form group.

public form: FormGroup;
constructor(private fb:FormBuilder){
    this.formInit();
  }
formInit(){
    this.form = this.fb.group({
      skills: this.fb.array([])
    })
     console.log(this.form.getRawValue());
  }
public get skills(){
    return this.form.get('skills') as FormArray;
}

9. Create a get method for getting all the skills and the return type must be formArray.

public get skills(){
    return this.form.get('skills') as FormArray;
}

10. Add some dummy data in the form array by directly using formGroup or skills.push() method.

formInit(){
    this.form = this.fb.group({
      skills: this.fb.array([
        this.fb.group({
          name:['JavaScript'],
          checked:[true]
        }),
        this.fb.group({
          name:['Angular'],
          checked:[false]
        }),
        this.fb.group({
          name:['React Js'],
          checked:[true]
        })
      ])
    })
console.log(this.form.getRawValue());
}

11. To Display the form array in app.component.html follows the below options.

• Add form HTML element in app.component.html and bind formGroup with form variable.

<form class=”form” [formGroup]=”form”></form>

• Add formArrayName as an attribute inside the form tag and pass skills as value to formArrayName.

<form class=”form” [formGroup]=”form”>
 <div class=”container”>
   <div formArrayName=”skills”></div>
 </div>
</form>

• Loop skills by using skills. controls and add form group names as below

<form class=”form” [formGroup]=”form”>
 <div class=”container”>
  <div formArrayName=”skills”>
   <div *ngFor=”let skill of skills.controls;let i=index” >
     <div [formGroupName]=”i”><input type=”checkbox”   formControlName=”checked” /> {{skill.get(‘name’).value}}
     </div>
   </div>
  </div>
 </div>
</form>

Download Source Code At
GitHub: mryenagandula/angular-formarray-example
Stack Blitz Live Preview: Mryenagandula - Angular Formarray Example

Thanks for reading my article, Please share your feedback, claps, and comments. In that way, it will be helped me to improve my articles in the future. Please share my story with your near and dear, Also follow and subscribe to the medium.