solve--add-formarray

src/app/book/book-new/book-new.component.html

@@ -19,16 +19,26 @@ <h2>New</h2>
     <input formControlName="subtitle" />
   </label>
 
-  <label class="form-field">
-    <span>Author</span>
-    <input formControlName="author" />
-    <small *ngIf="form.get('author')?.dirty && form.get('author')?.hasError('required')">
-      Please insert an Author.
-    </small>
-    <small *ngIf="form.get('author')?.dirty && form.get('author')?.hasError('invalidAuthor')">
-      Der Name eines Autors darf keine Zahlen beinhalten!
-    </small>
-  </label>
+  <ng-container formArrayName="authors">
+    <ng-container *ngFor="let author of authors.controls; let i = index">
+      <label class="form-field">
+        <span>Author</span>
+        <input [formControlName]="i" />
+        <small *ngIf="author?.dirty && author?.hasError('required')">
+          Please insert an Author.
+        </small>
+        <small *ngIf="author?.dirty && author?.hasError('invalidAuthor')">
+          Der Name eines Autors darf keine Zahlen beinhalten!
+        </small>
+      </label>
+      <button (click)="deleteAuthor(i)">
+        Remove Author
+      </button>
+    </ng-container>
+  </ng-container>
+  <button type="button" (click)="addAuthor()">
+    Author hinzufügen
+  </button>
 
   <label class="form-field">
     <span>Abstract</span>

src/app/book/book-new/book-new.component.ts

@@ -1,22 +1,22 @@
 import { Component } from '@angular/core';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
-import { NgIf } from '@angular/common';
+import { FormArray, FormBuilder, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { NgForOf, NgIf } from '@angular/common';
 import { BookApiService } from '../book-api.service';
 import { take } from 'rxjs';
 import { validAuthorName } from '../validators/author.validator';
 
 @Component({
   selector: 'app-book-new',
   standalone: true,
-  imports: [ReactiveFormsModule, NgIf],
+  imports: [ReactiveFormsModule, NgIf, NgForOf],
   templateUrl: './book-new.component.html',
   styleUrls: ['./book-new.component.scss']
 })
 export class BookNewComponent {
   form = this.formBuilder.nonNullable.group({
     title: ['', [Validators.required]],
     subtitle: [''],
-    author: ['', [Validators.required, validAuthorName()]],
+    authors: this.formBuilder.array([['', [Validators.required, validAuthorName()]]]),
     abstract: [''],
     isbn: ['']
   });
@@ -25,6 +25,21 @@ export class BookNewComponent {
   }
 
   submit() {
-    this.bookApiService.create(this.form.getRawValue()).pipe(take(1)).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(), author: firstAuthor }).pipe(take(1)).subscribe();
+  }
+
+  get authors(): FormArray {
+    return this.form.controls['authors'] as FormArray;
+  }
+
+  deleteAuthor(authorIndex: number) {
+    this.authors.removeAt(authorIndex);
+  }
+
+  addAuthor() {
+    this.authors.push(new FormControl('', [Validators.required, validAuthorName()]));
   }
 }