BookMonkey 6 Diff | 13-search (from 12a-validation-sf)

package.json CHANGED Viewed

@@ -30,7 +30,6 @@
     "@angular/forms": "^21.0.0-next.0",
     "@angular/platform-browser": "^21.0.0-next.0",
     "@angular/router": "^21.0.0-next.0",
-    "@standard-schema/spec": "^1.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },
@@ -50,4 +49,4 @@
     "typescript": "~5.9.2",
     "typescript-eslint": "8.40.0"
   }
-}

     "@angular/forms": "^21.0.0-next.0",
     "@angular/platform-browser": "^21.0.0-next.0",
     "@angular/router": "^21.0.0-next.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },
     "typescript": "~5.9.2",
     "typescript-eslint": "8.40.0"
   }
+}

src/app/books-admin/book-form/book-form.html CHANGED Viewed

@@ -1,10 +1,12 @@
-<form (submit)="submitForm($event)">
-  @let titleInvalid = isInvalid(f.title());
   <label for="title">Title</label>
   <input
     type="text"
     id="title"
-    [control]="f.title"
     [attr.aria-describedby]="titleInvalid ? 'title-error' : null"
     [attr.aria-invalid]="titleInvalid"
   />
@@ -13,14 +15,14 @@
   }
   <label for="subtitle">Subtitle</label>
-  <input type="text" id="subtitle" [control]="f.subtitle!" />
-  @let isbnInvalid = isInvalid(f.isbn());
   <label for="isbn">ISBN</label>
   <input
     type="text"
     id="isbn"
-    [control]="f.isbn"
     [attr.aria-describedby]="isbnInvalid ? 'isbn-error' : null"
     [attr.aria-invalid]="isbnInvalid"
   />
@@ -31,47 +33,22 @@
   <fieldset>
     <legend>Authors</legend>
     <button type="button" (click)="addAuthorControl()">Add Author</button>
-    @let authorsInvalid = isInvalid(f.authors());
     <div role="group">
-      @for (authorControl of f.authors; track $index) {
       <input
         type="text"
         [attr.aria-label]="'Author ' + $index + 1"
-        [control]="authorControl"
-        [attr.aria-describedby]="authorsInvalid ? 'authors-error' : null"
-        [attr.aria-invalid]="authorsInvalid"
       />
       }
-      @if (authorsInvalid) {
-        <small id="authors-error">At least one author must be added.</small>
-      }
     </div>
   </fieldset>
-  @let descriptionInvalid = isInvalid(f.description());
   <label for="description">Description</label>
-  <textarea
-    id="description"
-    [control]="f.description"
-    [attr.aria-describedby]="descriptionInvalid ? 'description-error' : null"
-    [attr.aria-invalid]="descriptionInvalid">
-  </textarea>
-  @if (descriptionInvalid) {
-  <small id="description-error">The description is invalid.</small>
-  }
-  @let imageUrlInvalid = isInvalid(f.imageUrl());
   <label for="imageUrl">Thumbnail URL</label>
-  <input
-    type="url"
-    id="imageUrl"
-    [control]="f.imageUrl"
-    [attr.aria-describedby]="imageUrlInvalid ? 'description-error' : null"
-    [attr.aria-invalid]="imageUrlInvalid" />
-  @if (imageUrlInvalid) {
-  <small id="image-url-error">The URL is invalid.</small>
-  }
-  <button type="submit" [disabled]="f().invalid()" [attr.aria-busy]="f().submitting()" >Save</button>
 </form>

+@let c = bookForm.controls;
+<form [formGroup]="bookForm" (ngSubmit)="submitForm()">
+  @let titleInvalid = isInvalid(c.title);
   <label for="title">Title</label>
   <input
     type="text"
     id="title"
+    [formControl]="c.title"
     [attr.aria-describedby]="titleInvalid ? 'title-error' : null"
     [attr.aria-invalid]="titleInvalid"
   />
   }
   <label for="subtitle">Subtitle</label>
+  <input type="text" id="subtitle" [formControl]="c.subtitle" />
+  @let isbnInvalid = isInvalid(c.isbn);
   <label for="isbn">ISBN</label>
   <input
     type="text"
     id="isbn"
+    [formControl]="c.isbn"
     [attr.aria-describedby]="isbnInvalid ? 'isbn-error' : null"
     [attr.aria-invalid]="isbnInvalid"
   />
   <fieldset>
     <legend>Authors</legend>
     <button type="button" (click)="addAuthorControl()">Add Author</button>
     <div role="group">
+      @for (authorControl of c.authors.controls; track $index) {
       <input
         type="text"
         [attr.aria-label]="'Author ' + $index + 1"
+        [formControl]="authorControl"
       />
       }
     </div>
   </fieldset>
   <label for="description">Description</label>
+  <textarea id="description" [formControl]="c.description"></textarea>
   <label for="imageUrl">Thumbnail URL</label>
+  <input type="url" id="imageUrl" [formControl]="c.imageUrl" />
+  <button type="submit" [disabled]="bookForm.invalid">Save</button>
 </form>

src/app/books-admin/book-form/book-form.ts CHANGED Viewed

@@ -1,65 +1,61 @@
-import { Component, output, signal } from '@angular/core';
-import { Control, customError, FieldState, form, maxLength, minLength, required, schema, submit, validate } from '@angular/forms/signals';
 import { Book } from '../../shared/book';
-export const formSchema = schema<Book>((fieldPath) => {
-  required(fieldPath.title);
-  required(fieldPath.isbn);
-  minLength(fieldPath.isbn, 13);
-  maxLength(fieldPath.isbn, 13);
-  validate(fieldPath.authors, ({ value }) =>
-    !value().some((a) => a)
-      ? customError({ kind: 'atLeastOneAuthor' })
-      : undefined
-  );
-  required(fieldPath.description);
-  required(fieldPath.imageUrl);
-})
 @Component({
   selector: 'app-book-form',
-  imports: [Control],
   templateUrl: './book-form.html',
   styleUrl: './book-form.scss'
 })
 export class BookForm {
   readonly submitBook = output<Book>();
-  protected readonly f = form(signal<Book>({
-    isbn: "",
-    title: "",
-    subtitle: "",
-    authors: [""],
-    description: "",
-    imageUrl: "",
-    createdAt: new Date().toISOString(),
-  }), formSchema);
   addAuthorControl() {
-    this.f.authors().value.update((authors) => [...authors, '']);
   }
-  isInvalid(field: FieldState<string | string[]>) {
-    if (!field.touched()) {
       return null;
     }
-    return !field.valid() && field.touched();
   }
-  async submitForm(e: Event) {
-    e?.preventDefault();
-    await submit(this.f, async (form) => {
-      const formValue = this.f().value();
-      const authors = this.f.authors().value().filter(author => !!author);
-      const newBook: Book = {
-        ...formValue,
-        authors,
-        createdAt: new Date().toISOString()
-      };
-      this.submitBook.emit(newBook);
-    });
   }
 }

+import { Component, output } from '@angular/core';
+import { FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Book } from '../../shared/book';
 @Component({
   selector: 'app-book-form',
+  imports: [ReactiveFormsModule],
   templateUrl: './book-form.html',
   styleUrl: './book-form.scss'
 })
 export class BookForm {
   readonly submitBook = output<Book>();
+  protected bookForm = new FormGroup({
+    isbn: new FormControl('', {
+      nonNullable: true,
+      validators: [
+        Validators.required,
+        Validators.minLength(13),
+        Validators.maxLength(13),
+      ]
+    }),
+    title: new FormControl('', {
+      nonNullable: true,
+      validators: Validators.required,
+    }),
+    subtitle: new FormControl('', { nonNullable: true }),
+    description: new FormControl('', { nonNullable: true }),
+    authors: new FormArray([
+      new FormControl('', { nonNullable: true })
+    ]),
+    imageUrl: new FormControl('', { nonNullable: true })
+  });
   addAuthorControl() {
+    this.bookForm.controls.authors.push(
+      new FormControl('', { nonNullable: true })
+    );
   }
+  isInvalid(control: FormControl) {
+    if (!control.touched) {
       return null;
     }
+    return control.invalid && control.touched;
   }
+  submitForm() {
+    const formValue = this.bookForm.getRawValue();
+    const authors = formValue.authors.filter(author => !!author);
+    const newBook: Book = {
+      ...formValue,
+      authors,
+      createdAt: new Date().toISOString()
+    };
+    this.submitBook.emit(newBook);
   }
 }

src/app/books-portal/book-details-page/book-details-page.html CHANGED Viewed

@@ -4,10 +4,11 @@
 }
 @if (book.isLoading()) {
-<p aria-busy="true">Loading...</p>
 }
-@if (book.value(); as b) {
 <article>
   <header>
     <h1>{{ b.title }}</h1>

 }
 @if (book.isLoading()) {
+<p aria-busy="true">Loading ...</p>
 }
+@if (book.hasValue()) {
+@let b = book.value();
 <article>
   <header>
     <h1>{{ b.title }}</h1>

src/app/books-portal/books-overview-page/books-overview-page.html CHANGED Viewed

@@ -21,11 +21,12 @@
       type="search"
       #searchInput
       (input)="this.searchTerm.set(searchInput.value)"
       placeholder="Search"
       aria-label="Search"
     />
-    @for (b of filteredBooks(); track b.isbn) {
     <app-book-card [book]="b" (like)="addLikedBook($event)" />
     }
   </div>

       type="search"
       #searchInput
       (input)="this.searchTerm.set(searchInput.value)"
+      [value]="this.searchTerm()"
       placeholder="Search"
       aria-label="Search"
     />
+    @for (b of books.value(); track b.isbn) {
     <app-book-card [book]="b" (like)="addLikedBook($event)" />
     }
   </div>

src/app/books-portal/books-overview-page/books-overview-page.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-import { Component, computed, inject, signal } from '@angular/core';
 import { Book } from '../../shared/book';
 import { BookCard } from '../book-card/book-card';
@@ -12,20 +13,23 @@ import { BookStore } from '../../shared/book-store';
 })
 export class BooksOverviewPage {
   #bookStore = inject(BookStore);
-  protected searchTerm = signal('');
-  protected books = this.#bookStore.getAll();
   protected likedBooks = signal<Book[]>([]);
-  protected filteredBooks = computed(() => {
-    if (!this.searchTerm()) {
-      return this.books.value();
-    }
-    const term = this.searchTerm().toLowerCase();
-    return this.books.value().filter((b) => b.title.toLowerCase().includes(term));
-  });
   addLikedBook(newLikedBook: Book) {
     const foundBook = this.likedBooks().find(

+import { Component, effect, inject, input, linkedSignal, signal } from '@angular/core';
+import { Router } from '@angular/router';
 import { Book } from '../../shared/book';
 import { BookCard } from '../book-card/book-card';
 })
 export class BooksOverviewPage {
   #bookStore = inject(BookStore);
+  #router = inject(Router);
+  readonly search = input<string>();
+  protected searchTerm = linkedSignal(() => this.search() || '');
+  protected books = this.#bookStore.getAll(this.searchTerm);
   protected likedBooks = signal<Book[]>([]);
+  constructor() {
+    effect(() => {
+      this.#router.navigate([], {
+        queryParams: {
+          search: this.searchTerm() || null
+        }
+      });
+    });
+  }
   addLikedBook(newLikedBook: Book) {
     const foundBook = this.likedBooks().find(

src/app/shared/book-store.ts CHANGED Viewed

@@ -11,9 +11,12 @@ export class BookStore {
   #http = inject(HttpClient);
   #apiUrl = 'https://api6.angular-buch.com';
-  getAll(): HttpResourceRef<Book[]> {
     return httpResource<Book[]>(
-      () => `${this.#apiUrl}/books`,
       { defaultValue: [] }
     );
   }

   #http = inject(HttpClient);
   #apiUrl = 'https://api6.angular-buch.com';
+  getAll(searchTerm: Signal<string>): HttpResourceRef<Book[]> {
     return httpResource<Book[]>(
+      () => ({
+        url: `${this.#apiUrl}/books`,
+        params: { search: searchTerm() }
+      }),
       { defaultValue: [] }
     );
   }

tsconfig.json CHANGED Viewed

@@ -3,11 +3,6 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@angular/forms/signals": ["./experimental"],
-      "@angular/forms/standard_schema": ["./experimental/src/api/validators/standard_schema"]
-    },
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,

 {
   "compileOnSave": false,
   "compilerOptions": {
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,

Differenzansicht 13-searchim Vergleich zu 12a-validation-sf

Differenzansicht 13-search
im Vergleich zu 12a-validation-sf