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

package.json CHANGED Viewed

@@ -28,6 +28,7 @@
     "@angular/forms": "^20.1.0",
     "@angular/platform-browser": "^20.1.0",
     "@angular/router": "^20.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
@@ -48,4 +49,4 @@
     "typescript": "~5.8.2",
     "typescript-eslint": "8.34.1"
   }
-}

     "@angular/forms": "^20.1.0",
     "@angular/platform-browser": "^20.1.0",
     "@angular/router": "^20.1.0",
+    "@standard-schema/spec": "^1.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
     "typescript": "~5.8.2",
     "typescript-eslint": "8.34.1"
   }
+}

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

@@ -1,12 +1,10 @@
-@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"
   />
@@ -15,14 +13,14 @@
   }
   <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"
   />
@@ -33,22 +31,52 @@
   <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>

+<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"
   />
   }
   <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"
   />
   <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>
+  <input
+    id="description"
+    [control]="f.description"
+    [attr.aria-describedby]="descriptionInvalid ? 'description-error' : null"
+    [attr.aria-invalid]="descriptionInvalid" />
+  <!-- <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>

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

@@ -1,61 +1,65 @@
-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);
   }
 }

+import { Component, output, signal } from '@angular/core';
+import { Control, FieldState, form, maxLength, minLength, required, schema, submit, validate, ValidationError } from '@angular/forms/signal-experimental';
 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)
+      ? ValidationError.custom({ 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);
+    });
   }
 }

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

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

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

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

@@ -19,10 +19,6 @@ export class BooksOverviewPage {
   protected likedBooks = signal<Book[]>([]);
   protected filteredBooks = computed(() => {
-    if (!this.books.hasValue()) {
-      return [];
-    }
     if (!this.searchTerm()) {
       return this.books.value();
     }

   protected likedBooks = signal<Book[]>([]);
   protected filteredBooks = computed(() => {
     if (!this.searchTerm()) {
       return this.books.value();
     }

tsconfig.json CHANGED Viewed

@@ -3,6 +3,11 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,

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

Differenzansicht 12a-validation-sfim Vergleich zu 12-validation

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