elmarputz

export class ErrorMessage {
 constructor(
   public forControl: string,
   public forValidator: string,
   public text: string
 ) { }
}
export const BookFormErrorMessages = [
 new ErrorMessage('title', 'required', 'Ein Buchtitel muss angegeben werden'),
 new ErrorMessage('isbn', 'required', 'Es muss eine ISBN angegeben werden'),

elmarputz

import { ActivatedRoute, Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

import { BookFormErrorMessages } from './book-form-error-messages';
import {BookFactory} from "../shared/book-factory";
import {BookStoreService} from "../shared/book-store.service";
import {Book, Image} from "../shared/book";

@Component({

elmarputz

<h1>Buchformular</h1>
<form  class="ui large form" [formGroup]="bookForm" (ngSubmit)="submitForm()">
 <input type="hidden" name="id">
 <div class="field">
   <label>Buchtitel</label>
   <input formControlName="title">
   <div *ngIf="errors.title" class="ui negative message"> {{ errors.title }} </div>
 </div>
 <div class="field">
   <label>Untertitel</label>

elmarputz

import { Book } from './book';

export class BookFactory {

 static empty(): Book {
   return new Book(null, '', '', [], new Date(),0, '', 0, [{id: 0, url: '', title: ''}], '');
 }

 static fromObject(rawBook: any): Book {
   return new Book(

elmarputz

import { NgModule } from '@angular/core';
import {Routes, RouterModule} from '@angular/router';

import { BookDetailsComponent } from './book-details/book-details.component';
import { BookListComponent } from './book-list/book-list.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
 { path: '', redirectTo: 'home', pathMatch: 'full' },
 { path: 'home', component: HomeComponent },

elmarputz

<div class="ui grid" *ngIf="book">
 <div class="four wide column">
   <img class="ui large image" *ngIf="book.images && book.images[0]"
[src]="book.images[0].url">
 </div>
 <div class="twelve wide column">
   <h1 class="ui header">{{ book.title }}</h1>
   <h3 class="ui header">{{ book.subtitle }}</h3>
   <div class="ui divider"></div>
   <div class="ui grid">

elmarputz

<div class="ui middle aligned selection divided list">
 <a *ngFor="let book of books" class="item">
   <img class="ui tiny image"
        *ngIf="book.images"
        [src]="book.images[0].url">
   <div class="content">
     <div class="header">{{ book.title }}</div>
     <div class="description"> {{ book.subtitle }} </div>
     <div class="metadata">

elmarputz

ngOnInit() {
   this.books = [
     new Book(1,
       '9783864903571',
       'Angular',
       [new Author(1,'Johannes', 'Hoppe'), new Author(2,'Danny','Koppenhagen'),
         new Author(3,'Ferdinand','Malcher'), new Author(4,'Gregor', 'Woiwode')],
       new Date(2017, 3, 1),
       1,
       'Grundlagen, fortgeschrittene Techniken und Best Practices mit TypeScript - ab Angular 4, inklusive NativeScript und Redux',

elmarputz

 public function update(Request $request, string $isbn) : JsonResponse
{

   DB::beginTransaction();
   try {
       $book = Book::with(['authors', 'images', 'user'])
           ->where('isbn', $isbn)->first();
       if ($book != null) {
           $request = $this->parseRequest($request);
           $book->update($request->all());

elmarputz

{
  "isbn":"24543534332342431",
  "title":"Erstes neues Buch", 
  "user_id": 1, 
  "rating" : 3,
  "authors":[{
    "id":3,
    "firstName":"Karl",
    "lastName":"Huber"