BookMonkey 4 Diff

Files changed (7) hide show

tmp/src/app/book-monkey/iteration-4/{reactive-forms → custom-validation}/book-form/book-form.component.ts +18 -16
tmp/src/app/book-monkey/iteration-4/{reactive-forms → custom-validation}/create-book/create-book.component.ts +0 -1
tmp/src/app/book-monkey/iteration-4/{reactive-forms → custom-validation}/edit-book/edit-book.component.ts +0 -1
tmp/src/app/book-monkey/iteration-4/{reactive-forms → custom-validation}/form-messages/form-messages.component.ts +3 -3
tmp/src/app/book-monkey/iteration-4/{reactive-forms → custom-validation}/shared/book-exists-validator.service.ts +25 -0
tmp/src/app/book-monkey/iteration-4/{reactive-forms → custom-validation}/shared/book-store.service.ts +8 -0
tmp/src/app/book-monkey/iteration-4/{reactive-forms → custom-validation}/shared/book-validators.ts +31 -0

tmp/src/app/book-monkey/iteration-4/{reactive-forms → custom-validation}/book-form/book-form.component.ts RENAMED

@@ -1,7 +1,9 @@
 import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
-import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
 import { Book, Thumbnail } from '../shared/book';
 @Component({
   selector: 'bm-book-form',
@@ -14,28 +16,32 @@
   @Input() book?: Book;
   @Input() set editing(isEditing: boolean) {
     const isbnControl = this.bookForm.get('isbn')!;
     if (isEditing) {
       isbnControl.disable();
     } else {
       isbnControl.enable();
     }
   };
   @Output() submitBook = new EventEmitter<Book>();
-  constructor(private fb: FormBuilder) {
     this.bookForm = this.fb.group({
       title: ['', Validators.required],
       subtitle: [''],
-      isbn: ['', [
-        Validators.required,
-        Validators.minLength(10),
-        Validators.maxLength(13)
-      ]],
       description: [''],
       authors: this.buildAuthorsArray(['']),
       thumbnails: this.buildThumbnailsArray([
@@ -45,11 +51,9 @@
     });
   }
-  ngOnInit(): void {
-  }
   ngOnChanges() {
     if (this.book) {
       this.setFormValues(this.book);
     }
@@ -71,9 +75,8 @@
     };
   }
   private buildAuthorsArray(values: string[]): FormArray {
-    return this.fb.array(values, Validators.required);
   }
   private buildThumbnailsArray(values: Thumbnail[]): FormArray {
@@ -102,7 +105,6 @@
   submitForm() {
     const formValue = this.bookForm.value;
     const authors = formValue.authors
               .filter((author: string) => author);
     const thumbnails = formValue.thumbnails

 import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
+import { FormBuilder, FormGroup, FormArray, Validators, AbstractControl } from '@angular/forms';
 import { Book, Thumbnail } from '../shared/book';
+import { BookValidators } from '../shared/book-validators';
+import { BookExistsValidatorService } from '../shared/book-exists-validator.service';
 @Component({
   selector: 'bm-book-form',
   @Input() book?: Book;
   @Input() set editing(isEditing: boolean) {
     const isbnControl = this.bookForm.get('isbn')!;
     if (isEditing) {
+      isbnControl.clearAsyncValidators();
       isbnControl.disable();
     } else {
+      isbnControl.setAsyncValidators(control => this.bookExistsValidator.validate(control));
       isbnControl.enable();
     }
   };
   @Output() submitBook = new EventEmitter<Book>();
+  constructor(
+    private fb: FormBuilder,
+    private bookExistsValidator: BookExistsValidatorService
+  ) {
     this.bookForm = this.fb.group({
       title: ['', Validators.required],
       subtitle: [''],
+      isbn: ['',
+        [
+          Validators.required,
+          BookValidators.isbnFormat
+        ],
+        (control: AbstractControl) => this.bookExistsValidator.validate(control)
+      ],
       description: [''],
       authors: this.buildAuthorsArray(['']),
       thumbnails: this.buildThumbnailsArray([
     });
   }
+  ngOnInit(): void { }
   ngOnChanges() {
     if (this.book) {
       this.setFormValues(this.book);
     }
     };
   }
   private buildAuthorsArray(values: string[]): FormArray {
+    return this.fb.array(values, BookValidators.atLeastOneAuthor);
   }
   private buildThumbnailsArray(values: Thumbnail[]): FormArray {
   submitForm() {
     const formValue = this.bookForm.value;
     const authors = formValue.authors
               .filter((author: string) => author);
     const thumbnails = formValue.thumbnails

tmp/src/app/book-monkey/iteration-4/{reactive-forms → custom-validation}/create-book/create-book.component.ts RENAMED

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { map, switchMap } from 'rxjs/operators';
 import { Book } from '../shared/book';
 import { BookStoreService } from '../shared/book-store.service';

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Book } from '../shared/book';
 import { BookStoreService } from '../shared/book-store.service';

tmp/src/app/book-monkey/iteration-4/{reactive-forms → custom-validation}/edit-book/edit-book.component.ts RENAMED

@@ -21,7 +21,6 @@
   ) { }
   ngOnInit(): void {
     this.route.paramMap.pipe(
       map(params => params.get('isbn') || ''),
       switchMap(isbn => this.bs.getSingle(isbn))

   ) { }
   ngOnInit(): void {
     this.route.paramMap.pipe(
       map(params => params.get('isbn') || ''),
       switchMap(isbn => this.bs.getSingle(isbn))

tmp/src/app/book-monkey/iteration-4/{reactive-forms → custom-validation}/form-messages/form-messages.component.ts RENAMED

@@ -17,14 +17,14 @@
     },
     isbn: {
       required: 'Es muss eine ISBN angegeben werden.',
-      minlength: 'Die ISBN muss mindestens 10 Zeichen haben.',
-      maxlength: 'Die ISBN darf höchstens 13 Zeichen haben.'
     },
     published: {
       required: 'Es muss ein Erscheinungsdatum angegeben werden.'
     },
     authors: {
-      required: 'Es muss ein Autor angegeben werden.'
     }
   };

     },
     isbn: {
       required: 'Es muss eine ISBN angegeben werden.',
+      isbnFormat: 'Die ISBN muss aus 10 oder 13 Zeichen bestehen.',
+      isbnExists: 'Die ISBN existiert bereits.'
     },
     published: {
       required: 'Es muss ein Erscheinungsdatum angegeben werden.'
     },
     authors: {
+      atLeastOneAuthor: 'Es muss ein Autor angegeben werden.'
     }
   };

tmp/src/app/book-monkey/iteration-4/{reactive-forms → custom-validation}/shared/book-exists-validator.service.ts RENAMED

	@@ -0,0 +1,25 @@

+import { Injectable } from '@angular/core';
+import { AsyncValidator, ValidationErrors, AbstractControl } from '@angular/forms';
+import { Observable, of } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
+import { BookStoreService } from './book-store.service';
+@Injectable({
+  providedIn: 'root'
+})
+export class BookExistsValidatorService implements AsyncValidator {
+  constructor(private bs: BookStoreService) { }
+  validate(
+    control: AbstractControl
+  ): Observable<ValidationErrors | null> {
+    return this.bs.check(control.value).pipe(
+      map(exists => (exists === false) ? null : {
+          isbnExists: { valid: false }
+      }),
+      catchError(() => of(null))
+    );
+  }
+}

tmp/src/app/book-monkey/iteration-4/{reactive-forms → custom-validation}/shared/book-store.service.ts RENAMED

@@ -77,6 +77,14 @@
     );
   }
   private errorHandler(error: HttpErrorResponse): Observable<any> {
     console.error('Fehler aufgetreten!');
     return throwError(error);

     );
   }
+  check(isbn: string): Observable<boolean> {
+    return this.http.get<boolean>(
+      `${this.api}/book/${isbn}/check`
+    ).pipe(
+      catchError(this.errorHandler)
+    );
+  }
   private errorHandler(error: HttpErrorResponse): Observable<any> {
     console.error('Fehler aufgetreten!');
     return throwError(error);

tmp/src/app/book-monkey/iteration-4/{reactive-forms → custom-validation}/shared/book-validators.ts RENAMED

	@@ -0,0 +1,31 @@

+import { FormArray, ValidationErrors, AbstractControl } from '@angular/forms';
+export class BookValidators {
+  static isbnFormat(control: AbstractControl): ValidationErrors | null {
+    if (!control.value) { return null; }
+    const numbers = control.value.replace(/-/g, '');
+    const isbnPattern = /(^\d{10}$)|(^\d{13}$)/;
+    if (isbnPattern.test(numbers)) {
+      return null;
+    } else {
+      return {
+        isbnFormat: { valid: false }
+      };
+    }
+  }
+  static atLeastOneAuthor(controlArray: AbstractControl): ValidationErrors | null {
+    if ((controlArray as FormArray).controls.some((el: AbstractControl) => el.value)) {
+      return null;
+    } else {
+      return {
+        atLeastOneAuthor: { valid: false }
+      };
+    }
+  }
+}