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 attribute form with type FormGroup
• Create a Form Model with FormBuilder
• Extend BooksService to save new Book

[web-dave]

generate

  ng g c books/book-new

[web-dave]

books-routing.module.ts

    {
      path: 'new',
      component: BookNewComponent
    }

[web-dave]

books/book-list.component.html

  <a [routerLink]="['new']" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
  </a>

[web-dave]

books.module.ts

  import { FormsModule, ReactiveFormsModule } from '@angular/forms';

  import ...

  @NgModule({
  imports: [
    CommonModule,
    BooksRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ],
  exports: [],
  declarations: [...],
  providers: [...]
  })
  export class BooksModule { }

[web-dave]

books/book-new.component.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.compose([Validators.required, Validators.minLength(6)])],
        isbn: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
        publisher: this.formBuilder.group({
          name: ['', Validators.required],
          url: ['', Validators.required]
        })
      });
    }

  }

[web-dave]

books/book-new.component.html

<form [formGroup]="form" (ngSubmit)="saveBook()">
  <div class="form-group">
    <label for="title">Title</label>
    <input type="text" id="title" formControlName="title">
    <div [hidden]="!form.get('title').hasError('required')">
      Enter a tilte
    </div>
  </div>
  <div class="form-group">

    <label for="isbn">ISBN</label>
    <input type="text" id="isbn" formControlName="isbn">
  </div>
  <fieldset formGroupName="publisher">
    <div class="form-group">
      <label>Name:</label>
      <input type="text" formControlName="name">
    </div>
    <div class="form-group">

      <label>Url:</label>
      <input type="text" formControlName="url">
    </div>

  </fieldset>

  <div [hidden]="!form.get('isbn').hasError('isbn')">
    Not a valid ISBN
  </div>

  <button type="submit" [disabled]="form.invalid">Save</button>
</form>

[web-dave]

books.service.ts

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