typescript - Iterarea încărcării fișierelor cu descriere folosind FormArray în Angular

Încerc să creez un formular care va avea n câmpuri, inclusiv încărcarea de fișiere. Încerc să iterez încărcarea de fișiere la clic pe un buton. Deci, implicit va exista un fișier. Așadar, când utilizatorul face clic pe butonul de adăugare, ar trebui să se adauge un set suplimentar de încărcare de fișiere. Deci, ieșirea mea ar trebui să fie ceva de genul unui array de n obiecte de fișiere.

Rezultatul așteptat pentru încărcarea fișierului:

[
 {
  file: image1,
  fileDescription: file1
 },
 {
  file: image2,
  fileDescription: my second image
 }
]

Fișierul șters nu este disponibil pentru reîncărcare, pentru asta am folosit @ViewChild pentru a reseta value='', apoi puteți selecta din nou fișierul șters. Acest lucru a fost adăugat din unul dintre răspunsurile lui Prashant

Notă: Toate cele de mai sus ar trebui să aibă validare. Iată stackblitz-ul funcțional pe care l-am încercat până acum.

Răspuns #1

Trebuie să folosești un FormArray și să adaugi o valoare nouă de fiecare dată când utilizatorul face clic pe butonul „adauga încărcare fișier”.

Poți găsi un exemplu funcțional aici: https://stackblitz.com/edit/angular-pg1szu