- 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import { Component, OnInit} from '@angular/core'; import { FormGroup,FormBuilder, FormArray } from '@angular/forms'; @Component({ selector: 'my-form', templateUrl: `./template.html`, }) export class FormComponent implements OnInit { constructor(private fb: FormBuilder) { } sampleForm: FormGroup; ngOnInit() { this.sampleForm = this.fb.group({ items: this.fb.array([this.fb.group({ item: '' })]) }) } get lst_items() { return this.sampleForm.get('items') as FormArray; } additem() { this.lst_items.push(this.fb.group({ item: '' })); } deleteitem(index: number) { this.lst_items.removeAt(index); } } |
Step2: Create a template
File: template.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="container"> <form [formGroup]="sampleForm"> <h2>Food Menu</h2> <div formArrayName="items"> <div *ngFor="let itm of lst_items.controls; let i=index" [formGroupName]="i"> <label> Item {{i+1}}: <input formControlName="item" class="form-control" /> </label> <button type="button" class="btn btn-danger btn-sm" (click)="deleteitem(i)">Delete item</button> </div> <button type="button" class="btn btn-primary btn-sm" (click)="additem()">Add item</button> </div> </form> <br /> <pre class="col-sm-3">{{ this.sampleForm.value | json }}</pre> </div> |
Step3: Adding FormsComponent in AppModule
File: app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule} from '@angular/forms'; import { FormComponent } from './app.FormComponent'; @NgModule({ imports: [BrowserModule, ReactiveFormsModule], declarations: [FormComponent], bootstrap: [FormComponent], }) export class AppModule { } |
Step4: Bootstraping AppModule
File: main.ts
|
1 2 3 4 5 |
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); |
Step5: Creating Startup file. Add the required files for bootstrap in your directory.
File: index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <script>document.write('<base href="' + document.location + '" />');</script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Polyfill(s) for older browsers --> <script src="/node_modules/core-js/client/shim.min.js"></script> <script src="/node_modules/zone.js/dist/zone.js"></script> <script src="/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <link href="/Content/bootstrap.css" rel="stylesheet" /> <script src="/Scripts/jquery-1.10.2.js"></script> <script src="/Scripts/bootstrap.js"></script> <script> System.import('main.js').catch(function (err) { console.error(err); }); </script> </head> <body> <my-form>Loading...</my-form> </body> </html> |
Output:
Open AWS Explorer 
