dispatch action

[web-dave]

• dispatch action
• every input should check Form state on blur
• import NgRedux into book-new via DI
• dispatch a action responsing on the form state

dont forget to dispatch on save!!

[web-dave]

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" (blur)="checkForm()">
   <div [hidden]="!form.get('title').hasError('required')">
     Enter a tilte
   </div>
 </div>

[web-dave]

book-new.component.ts

import { FORM_DIRTY, FORM_PRISTINE, IAppState } from '../../redux/store';
import { NgRedux } from '@angular-redux/store';
...
@Component({
 selector: 'book-new',
 templateUrl: './book-new.component.html',
 styleUrls: ['./book-new.component.scss']
})
export class BookNewComponent implements OnInit {
...
  constructor(...,
   private ngRedux: NgRedux<IAppState>
 ) { }
}

[web-dave]

book-new.component.ts

 checkForm() {
   if (this.form.dirty) {
     this.ngRedux.dispatch(FORM_DIRTY)
   } else {
     this.ngRedux.dispatch(FORM_PRISTINE)
   }
 }

[web-dave]

book-new.component.ts

 saveBook() {
   this.booksService.createBook(this.form.value)
     .subscribe(() => {
       this.ngRedux.dispatch(FORM_PRISTINE)
       this.router.navigate(['/books']);
     });
 }