Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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({
selector: 'bs-book-form',
templateUrl: './book-form.component.html'
})
export class BookFormComponent implements OnInit {
bookForm: FormGroup;
book = BookFactory.empty();
errors: { [key: string]: string } = {};
isUpdatingBook = false;
images: FormArray;
constructor(private fb: FormBuilder, private bs: BookStoreService,
private route: ActivatedRoute, private router: Router) { }
ngOnInit() {
const isbn = this.route.snapshot.params['isbn'];
if (isbn) {
this.isUpdatingBook = true;
this.bs.getSingle(isbn).subscribe(book => {
this.book = book;
this.initBook();
});
}
this.initBook();
}
initBook() {
this.buildThumbnailsArray();
this.bookForm = this.fb.group({
id: this.book.id,
title: [this.book.title, Validators.required],
subtitle: this.book.subtitle,
isbn: [this.book.isbn, [
Validators.required,
Validators.minLength(10),
Validators.maxLength(13)
]],
description: this.book.description,
rating: [this.book.rating,[
Validators.min(0),
Validators.max(10)
]],
//authors: this.authors,
images: this.images,
published: new Date(this.book.published)
});
this.bookForm.statusChanges.subscribe(() => this.updateErrorMessages());
}
buildThumbnailsArray() {
console.log(this.book.images);
if(this.book.images.length == 0){ //if new book had no images -> but no in edit mode
this.book.images.push(new Image(0,'',''))
}
this.images = this.fb.array(
this.book.images.map(
t => this.fb.group({
id: this.fb.control(t.id),
url: this.fb.control(t.url),
title: this.fb.control(t.title)
})
)
);
console.log(this.images);
}
addThumbnailControl() {
this.images.push(this.fb.group({ url: null, title: null }));
}
submitForm() {
// filter empty values
this.bookForm.value.images = this.bookForm.value.images.filter(thumbnail => thumbnail.url);
const book: Book = BookFactory.fromObject(this.bookForm.value);
//deep copy - did not work without??
book.images = this.bookForm.value.images;
console.log(book);
//just copy the authors
book.authors = this.book.authors;
if (this.isUpdatingBook) {
this.bs.update(book).subscribe(res => {
this.router.navigate(['../../books', book.isbn], { relativeTo: this.route });
});
} else {
book.user_id = 1;// jsut for testing
console.log(book)
this.bs.create(book).subscribe(res => {
this.book = BookFactory.empty();
this.bookForm.reset(BookFactory.empty());
this.router.navigate(['../books'], { relativeTo: this.route });
});
}
}
updateErrorMessages() {
this.errors = {};
for (const message of BookFormErrorMessages) {
const control = this.bookForm.get(message.forControl);
if (control &&
control.dirty &&
control.invalid &&
control.errors[message.forValidator] &&
!this.errors[message.forControl]) {
this.errors[message.forControl] = message.text;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.