Create a Book

[web-dave]

• Generate a book-new component
• Add a new route
• Import ReactiveFormsModule into BooksModule
• Import Validators, FormBuilder and FormGroup into BookNewComponent
• Instantiate FormBuilder in a attribute via DI
• define a indexed type to have a FormType (angular 14)
• define a attribute form with typed FormGroup (angular 14)
• Create a Form Model with FormBuilder
• Extend BooksService to save new Book (this includes DI the BookService and define a method..)

[web-dave]

books-routing.module.ts

```ts { path: 'new', component: BookNewComponent } ```

books/book-list.component.html

```html NEW ```

books.module.ts

```ts import { ReactiveFormsModule } from '@angular/forms'; import ... @NgModule({ imports: [ CommonModule, BooksRoutingModule, ReactiveFormsModule ], exports: [], declarations: [...], providers: [] }) export class BooksModule { } ```

indexd Forme Type (angular 14+)

```ts export type IForm = { [K in keyof T]: FormControl; }; ```

book-new.component.ts (angular 14+)

```ts import { Validators, FormBuilder, FormGroup } from '@angular/forms'; @Component({ selector: 'book-new', ... }) export class BookNewComponent implements OnInit { form: FormGroup>; constructor(private formBuilder: FormBuilder) { } ngOnInit() { this.form = this.formBuilder.nonNullable.group({ title: ['', [Validators.required, Validators.minLength(6)]], isbn: ['', [Validators.required, Validators.minLength(6)]], id: ['', []], subtitle: ['', []], abstract: ['', []], author: ['', []], publisher: ['', []], price: ['', []], numPages: [0, []], cover: ['', []], userId: [0, []], }); } } ```

book-new.component.ts (angular <14)

```ts import { Validators, FormBuilder, FormGroup } from '@angular/forms'; @Component({ selector: 'book-new', ... }) export class BookNewComponent implements OnInit { form: FormGroup; constructor(private formBuilder: FormBuilder) { } ngOnInit() { this.form = this.formBuilder.group({ title: ['', [Validators.required, Validators.minLength(6)]], isbn: ['', [Validators.required, Validators.minLength(6)]], id: ['', []], subtitle: ['', []], abstract: ['', []], author: ['', []], publisher: ['', []], price: ['', []], numPages: [0, []], cover: ['', []], userId: [0, []], }); } } ```

books/book-new.component.html

```html

Title

Enter a title

ISBN

Not a valid ISBN

Name:

Abstract:

Save

```

books.service.ts

```ts createBook(book): Observable { const url = `${this.restRoot}`; return this.http.post(url, book); } ```

book-new.component.ts

```ts saveBook() { this.bookService.createBook(this.form.getRawValue()).subscribe(); } ```

[web-dave]

Next