BM5 Diff | 11-reactive-forms (von 10-template-driven-forms)

src/app/admin/admin-routing.module.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { BookCreateComponent } from './book-create/book-create.component';
 const routes: Routes = [
   {
@@ -10,6 +11,10 @@ const routes: Routes = [
   {
     path: 'admin/create',
     component: BookCreateComponent,
   }
 ];

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { BookCreateComponent } from './book-create/book-create.component';
+import { BookEditComponent } from './book-edit/book-edit.component';
 const routes: Routes = [
   {
   {
     path: 'admin/create',
     component: BookCreateComponent,
+  },
+  {
+    path: 'admin/edit/:isbn',
+    component: BookEditComponent,
   }
 ];

src/app/admin/admin.module.ts CHANGED Viewed

@@ -1,20 +1,24 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
 import { AdminRoutingModule } from './admin-routing.module';
 import { BookFormComponent } from './book-form/book-form.component';
 import { BookCreateComponent } from './book-create/book-create.component';
 @NgModule({
   declarations: [
     BookFormComponent,
-    BookCreateComponent
   ],
   imports: [
     CommonModule,
     AdminRoutingModule,
-    FormsModule
   ],
 })
 export class AdminModule { }

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { LocalIsoDateValueAccessor } from 'angular-date-value-accessor';
 import { AdminRoutingModule } from './admin-routing.module';
 import { BookFormComponent } from './book-form/book-form.component';
 import { BookCreateComponent } from './book-create/book-create.component';
+import { BookEditComponent } from './book-edit/book-edit.component';
 @NgModule({
   declarations: [
     BookFormComponent,
+    BookCreateComponent,
+    BookEditComponent
   ],
   imports: [
     CommonModule,
     AdminRoutingModule,
+    ReactiveFormsModule,
+    LocalIsoDateValueAccessor
   ],
 })
 export class AdminModule { }

src/app/admin/book-edit/book-edit.component.html ADDED Viewed

	@@ -0,0 +1,6 @@

+<h1>Edit Book</h1>
+<bm-book-form
+  *ngIf="book$ | async as book"
+  [book]="book"
+  (submitBook)="update($event)"></bm-book-form>

src/app/admin/book-edit/book-edit.component.spec.ts ADDED Viewed

	@@ -0,0 +1,23 @@

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BookEditComponent } from './book-edit.component';
+describe('BookEditComponent', () => {
+  let component: BookEditComponent;
+  let fixture: ComponentFixture<BookEditComponent>;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BookEditComponent ]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(BookEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/book-edit/book-edit.component.ts ADDED Viewed

	@@ -0,0 +1,32 @@

+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { map, Observable, switchMap } from 'rxjs';
+import { Book } from '../../shared/book';
+import { BookStoreService } from '../../shared/book-store.service';
+@Component({
+  selector: 'bm-book-edit',
+  templateUrl: './book-edit.component.html',
+  styleUrls: ['./book-edit.component.css']
+})
+export class BookEditComponent {
+  book$: Observable<Book>;
+  constructor(
+    private service: BookStoreService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {
+    this.book$ = this.route.paramMap.pipe(
+      map(params => params.get('isbn')!),
+      switchMap(isbn => this.service.getSingle(isbn))
+    );
+  }
+  update(book: Book) {
+    this.service.update(book).subscribe(updatedBook => {
+      this.router.navigate(['/books', updatedBook.isbn]);
+    });
+  }
+}

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

@@ -1,26 +1,33 @@
-<form (ngSubmit)="submitForm()" #form="ngForm">
   <label for="title">Title</label>
-  <input
-    name="title"
-    id="title"
-    [(ngModel)]="book.title"
-    required>
   <label for="isbn">ISBN</label>
-  <input
-    name="isbn"
-    id="isbn"
-    [(ngModel)]="book.isbn"
-    required
-    minlength="10"
-    maxlength="13">
-  <label for="author">Author</label>
-  <input
-    name="author"
-    id="author"
-    [(ngModel)]="book.authors[0]"
-    required>
   <button type="submit" [disabled]="form.invalid">
     Save

+<form [formGroup]="form" (ngSubmit)="submitForm()">
   <label for="title">Title</label>
+  <input id="title" formControlName="title">
+  <label for="subtitle">Subtitle</label>
+  <input id="subtitle" formControlName="subtitle">
   <label for="isbn">ISBN</label>
+  <input id="isbn" formControlName="isbn">
+  <label>Authors</label>
+  <button type="button" class="add"
+    (click)="addAuthorControl()">
+    + Author
+  </button>
+  <fieldset formArrayName="authors">
+    <input
+      *ngFor="let a of authors.controls; index as i"
+      [attr.aria-label]="'Author ' + i"
+      [formControlName]="i">
+  </fieldset>
+  <label for="description">Description</label>
+  <textarea id="description" formControlName="description"></textarea>
+  <label for="published">Published</label>
+  <input type="date" useValueAsLocalIso id="published" formControlName="published">
+  <label for="thumbnailUrl">Thumbnail URL</label>
+  <input type="url" id="thumbnailUrl" formControlName="thumbnailUrl">
   <button type="submit" [disabled]="form.invalid">
     Save

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

@@ -1,4 +1,5 @@
-import { Component, Output, EventEmitter } from '@angular/core';
 import { Book } from '../../shared/book';
@@ -7,16 +8,81 @@ import { Book } from '../../shared/book';
   templateUrl: './book-form.component.html',
   styleUrls: ['./book-form.component.css']
 })
-export class BookFormComponent {
-  book: Book = {
-    isbn: '',
-    title: '',
-    authors: ['']
-  };
   @Output() submitBook = new EventEmitter<Book>();
   submitForm() {
-    this.submitBook.emit(this.book);
   }
 }

+import { Component, Output, EventEmitter, Input, OnChanges } from '@angular/core';
+import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Book } from '../../shared/book';
   templateUrl: './book-form.component.html',
   styleUrls: ['./book-form.component.css']
 })
+export class BookFormComponent implements OnChanges {
+  @Input() book?: Book;
   @Output() submitBook = new EventEmitter<Book>();
+  form = new FormGroup({
+    title: new FormControl('', {
+      nonNullable: true,
+      validators: Validators.required,
+    }),
+    subtitle: new FormControl('', { nonNullable: true }),
+    isbn: new FormControl('', {
+      nonNullable: true,
+      validators: [
+        Validators.required,
+        Validators.minLength(10),
+        Validators.maxLength(13),
+      ]
+    }),
+    description: new FormControl('', { nonNullable: true }),
+    published: new FormControl('', { nonNullable: true }),
+    authors: this.buildAuthorsArray(['']),
+    thumbnailUrl: new FormControl('', { nonNullable: true })
+  });
+  ngOnChanges(): void {
+    if (this.book) {
+      this.setFormValues(this.book);
+      this.setEditMode(true);
+    } else {
+      this.setEditMode(false);
+    }
+  }
+  private setFormValues(book: Book) {
+    this.form.patchValue(book);
+    this.form.setControl(
+      'authors',
+      this.buildAuthorsArray(book.authors)
+    );
+  }
+  private setEditMode(isEditing: boolean) {
+    const isbnControl = this.form.controls.isbn;
+    if (isEditing) {
+      isbnControl.disable();
+    } else {
+      isbnControl.enable();
+    }
+  }
+  private buildAuthorsArray(authors: string[]) {
+    return new FormArray(
+      authors.map(v => new FormControl(v, { nonNullable: true }))
+    );
+  }
+  get authors() {
+    return this.form.controls.authors;
+  }
+  addAuthorControl() {
+    this.authors.push(new FormControl('', { nonNullable: true }));
+  }
   submitForm() {
+    const formValue = this.form.getRawValue();
+    const authors = formValue.authors.filter(author => !!author);
+    const newBook: Book = {
+      ...formValue,
+      authors
+    };
+    this.submitBook.emit(newBook);
   }
 }

src/app/books/book-details/book-details.component.html CHANGED Viewed

@@ -26,4 +26,8 @@
   <button class="red" (click)="removeBook(book.isbn)">
     Remove book
   </button>
 </div>

   <button class="red" (click)="removeBook(book.isbn)">
     Remove book
   </button>
+  <a class="button"
+    [routerLink]="['/admin/edit', book.isbn]">
+    Edit book
+  </a>
 </div>

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

@@ -41,4 +41,11 @@ export class BookStoreService {
   create(book: Book): Observable<Book> {
     return this.http.post<Book>(`${this.apiUrl}/books`, book);
   }
 }

   create(book: Book): Observable<Book> {
     return this.http.post<Book>(`${this.apiUrl}/books`, book);
   }
+  update(book: Book): Observable<Book> {
+    return this.http.put<Book>(
+      `${this.apiUrl}/books/${book.isbn}`,
+      book
+    );
+  }
 }

Differenzansicht 11-reactive-formsim Vergleich zu 10-template-driven-forms

Differenzansicht 11-reactive-forms
im Vergleich zu 10-template-driven-forms