style(book-new): add bootstrap form style

Author: robinboehm

src/app/book/book-new/book-new.component.html

@@ -1,8 +1,23 @@
 <h2>Add New Book</h2>
 <form [formGroup]="form" (ngSubmit)="onSubmit()">
-  <input type="text" formControlName="title" /><br />
-  <span [hidden]="!form.get('title').hasError('required')">Title is required</span><br />
-  <input type="text" formControlName="author" /><br />
-  <span [hidden]="!form.get('author').hasError('required')">Author is required</span><br />
-  <button [disabled]="!form.valid">Save</button>
-</form>
+  <div class="form-group row">
+    <label for="isbn" class="col-sm-2 col-form-label">ISBN</label>
+    <input class="form-control col-sm-10" type="text" formControlName="isbn" />
+    <small class="col-sm-10 offset-sm-2" [hidden]="!form.get('isbn').hasError('required')">ISBN is required</small>
+    <small class="col-sm-10 offset-sm-2" [hidden]="!form.get('isbn').hasError('minlength')">ISBN length should be 13</small>
+    <small class="col-sm-10 offset-sm-2" [hidden]="!form.get('isbn').hasError('maxlength')">ISBN length should be 13</small>
+  </div>
+  <div class="form-group row">
+    <label for="title" class="col-sm-2 col-form-label">Title</label>
+    <input type="text" formControlName="title" class="form-control col-sm-10" />
+    <small class="col-sm-10 offset-sm-2" [hidden]="!form.get('title').hasError('required')">Title is required</small>
+  </div>
+  <div class="form-group row">
+    <label for="author" class="col-sm-2 col-form-label">Author</label>
+    <input class="form-control col-sm-10" type="text" formControlName="author" />
+    <small class="col-sm-10 offset-sm-2" [hidden]="!form.get('author').hasError('required')">Author is required</small>
+  </div>
+  <div class="row">
+    <button [disabled]="!form.valid" type="submit" class="btn btn-success offset-sm-2">Create</button>
+  </div>
+</form>