Components/create-edit-modal: add controls for adding and removing images

src/components/create-edit-modal/create-edit-modal.component.html

@@ -30,6 +30,28 @@
       <input formControlName="description" type="text" class="form-control" placeholder=""/>
       <label class="form-label">Description</label>
     </div>
+    <label class="form-label">Images</label>
+    <div class="card" formArrayName="images">
+      <ul class="list-group list-group-flush">
+        @for (imageControl of images.controls; track imageControl) {
+          <li class="list-group-item">
+            <div class="input-group">
+              <div class="form-floating">
+                <input formControlName="{{$index}}" type="text" class="form-control" placeholder="">
+                <label class="form-label">Image {{ $index + 1 }} URL</label>
+              </div>
+              <button type="button" class="btn btn-outline-danger" (click)="removeImageControl($index)"><i
+                class="bi bi-x-lg"></i></button>
+            </div>
+          </li>
+        }
+        <li class="list-group-item">
+          <button type="button" class="btn btn-outline-primary" (click)="addImageControl()">
+            <i class="bi bi-plus-lg"></i> Add new image
+          </button>
+        </li>
+      </ul>
+    </div>
   </div>
   <div class="modal-footer">
     <button type="submit" class="btn btn-success" [disabled]="newShowForm.invalid">Submit</button>

src/components/create-edit-modal/create-edit-modal.component.ts

@@ -1,6 +1,6 @@
 import {Component, inject} from '@angular/core';
 import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
-import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {ShowsApiService} from '../../services/shows/shows-api.service';
 import {ShowsApiCreation} from '../../interfaces/shows-api-creation';
 import {ToastService} from '../../services/toast/toast.service';
@@ -41,14 +41,27 @@ export class CreateEditModalComponent {
       seasons: new FormControl(this.show?.seasons, [Validators.required, Validators.min(1)]),
       date: new FormControl(formattedDate, Validators.required),
       episodes: new FormControl(this.show?.episodes, [Validators.required, Validators.min(1)]),
-      description: new FormControl(this.show?.description, Validators.required)
+      description: new FormControl(this.show?.description, Validators.required),
+      images: new FormArray([])
     })
   }
 
+  get images(): FormArray {
+    return this.newShowForm.get("images") as FormArray
+  }
+
   protected dismiss() {
     this.activeModal.dismiss()
   }
 
+  protected addImageControl() {
+    this.images.push(new FormControl(""))
+  }
+
+  protected removeImageControl(index: number) {
+    this.images.removeAt(index)
+  }
+
   protected formSubmitted(form: FormGroup) {
     let show: Show = {
       title: form.get("title")?.value,