solve--add-formarray

workshops-de · Sep 8, 2024 · 2b32982 · 2b32982
1 parent 41f78ba
commit 2b32982
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 13 deletions.
diff --git a/src/app/book/book-new/book-new.component.html b/src/app/book/book-new/book-new.component.html
@@ -24,17 +24,24 @@ <h2>New</h2>
     <input formControlName="subtitle" />
   </label>
 
-  <label class="form-field">
-    <span>Author</span>
-    <input formControlName="author" />
-    @if (form.controls.author.dirty) {
-      @if (form.controls.author.hasError('required')) {
-        <small>Please insert an Author.</small>
-      } @else if (form.controls.author.hasError('invalidAuthor')) {
-        <small>Name must not contain digits</small>
-      }
+  <ng-container formArrayName="authors">
+    @for (author of authors.controls; track author; let index = $index) {
+      <label class="form-field">
+        <span>Author</span>
+        <input [formControlName]="index" />
+
+        @if (author.dirty) {
+          @if (author.hasError('required')) {
+            <small>Please insert an Author.</small>
+          } @else if (author.hasError('invalidAuthor')) {
+            <small>Name must not contain digits</small>
+          }
+        }
+      </label>
+      <button (click)="deleteAuthor(index)">Remove Author</button>
     }
-  </label>
+  </ng-container>
+  <button type="button" (click)="addAuthor()">Author hinzufügen</button>
 
   <label class="form-field">
     <span>Abstract</span>

diff --git a/src/app/book/book-new/book-new.component.ts b/src/app/book/book-new/book-new.component.ts
@@ -1,5 +1,6 @@
 import { Component, inject } from '@angular/core';
 import {
+  FormArray,
   FormControl,
   FormGroup,
   NonNullableFormBuilder,
@@ -13,7 +14,7 @@ interface BookForm {
   isbn: FormControl<string>;
   title: FormControl<string>;
   subtitle: FormControl<string>;
-  author: FormControl<string>;
+  authors: FormArray<FormControl<string>>;
   abstract: FormControl<string>;
 }
 
@@ -32,13 +33,33 @@ export class BookNewComponent {
     isbn: ['', [Validators.required]],
     title: ['', [Validators.required]],
     subtitle: [''],
-    author: ['', [Validators.required, validAuthorName()]],
+    authors: this.formBuilder.array([
+      ['', [Validators.required, validAuthorName()]]
+    ]),
     abstract: ['']
   });
 
   submit() {
+    this.bookApiService.create(this.form.getRawValue()).subscribe();
+    // We need to handle the formArray now for authors separately
+    // Unfortunately the backend doesn't handle multiple authors yet
+    const firstAuthor = this.form.getRawValue().authors[0] || 'n/a';
     this.bookApiService
-      .create(this.form.getRawValue())
+      .create({ ...this.form.getRawValue(), author: firstAuthor })
       .subscribe();
   }
+
+  get authors(): FormArray {
+    return this.form.controls.authors;
+  }
+
+  deleteAuthor(authorIndex: number) {
+    this.authors.removeAt(authorIndex);
+  }
+
+  addAuthor() {
+    this.authors.push(
+      this.formBuilder.control('', [Validators.required, validAuthorName()])
+    );
+  }
 }