Usare i FormArray in Angular

Mattepuffo's logo
Usare i FormArray in Angular

Usare i FormArray in Angular

I FormArray in Angular ci permettono di aggiungere elementi ad un form in maniera dinamica.

Supponiamo ad esempio che un utente deve poter aggiungere diverse attività ed inviarle tutte dallo stesso form.

Quello che faremo è proprio questo; avremo anche un tasto per aggiungere gli elementi al form.

Cominciamo con aggiungere il modulo ReactiveFormsModule al file app.module.ts:

import {FormsModule, ReactiveFormsModule} from '@angular/forms';
......

@NgModule({
    imports: [
		......,
        FormsModule,
        ReactiveFormsModule,
    ],
    declarations: [
        ......
    ],
    providers: [
        ......
    ],
    bootstrap: [AppComponent]
})

export class AppModule {
}

A questo punto vediamo il nostro componente:

import {Component, OnInit} from '@angular/core';
import {FormArray, FormBuilder, FormControl, FormGroup} from '@angular/forms';

@Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.scss']
})

export class TestComponent implements OnInit {

    frm: FormGroup;
    attivita: FormArray;

    constructor(
        private frmBuilder: FormBuilder
    ) {
    }

    ngOnInit(): void {
        this.frm = this.frmBuilder.group({
            email: new FormControl(''),
            attivita: this.frmBuilder.array([this.creaAttivita()])
        });

        this.attivita = this.frm.get('attivita') as FormArray;
    }

    creaAttivita(): FormGroup {
        return this.frmBuilder.group({
            descrizione: new FormControl(''),
            prezzo: new FormControl(0)
        });
    }

    aggiungi(): void {
        this.attivita.push(this.creaAttivita());
    }

    invia(): void {
        console.log(this.frm.value);
    }

}

Infine l'HTML:

<button (click)="aggiungi()">Aggiungi elemento</button>
<br><br>
<form [formGroup]="frm">
    <input type="text" formControlName="email" placeholder="Email">
    <br><br>
    <div formArrayName="attivita" *ngFor="let item of frm.get('attivita')['controls']; let i = index;">
        <div [formGroupName]="i">
            <input type="text" formControlName="descrizione" placeholder="Descrizione">
            <br>
            <input type="number" formControlName="prezzo" placeholder="Prezzo">
            <hr>
        </div>
    </div>
    <button (click)="invia()">Invia</button>
</form>

Enjoy!


Condividi su Facebook

Commentami!