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!
typescript angular formsmodule reactiveformsmodule formarray
Commentami!