Solution for lab #19

src/app/checkout-form/checkout-form.component.html

@@ -27,8 +27,9 @@
   <br>
   <div class="row">
     <div class="col-lg-6">
+      <div class="alert alert-danger" role="alert" [hidden]="zip.valid || zip.pristine">Please enter a 5-digit zipcode</div>
       <div class="input-group">
-        <input type="text" class="form-control" placeholder="Zip" name="zip" ngModel>
+        <input type="text" class="form-control" placeholder="Zip" name="zip" ngModel required  pattern="[0-9]{5}" #zip="ngModel">
       </div>
     </div>
     <div class="col-lg-6">
@@ -46,9 +47,14 @@
       </div>
     </div>
     <div class="col-lg-6">
-
+      <div class="form-group">
+        <select name="state" ngModel class="form-control" placeholder="state">
+          <option *ngFor="let state of states | async" [value]="state.abbreviation">{{state.name}}</option>
+        </select>
+      </div>
     </div>
   </div>
   <br>
   <button type="submit" class="btn btn-primary">Submit</button>
 </form>
+<app-popup-window title="Order complete" (onClose)="goToHome()" [isOpen]="showPopup">Your order will ship within 24 hours</app-popup-window>

src/app/checkout-form/checkout-form.component.ts

@@ -1,4 +1,7 @@
 import { Component } from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Observable} from 'rxjs/Observable';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-checkout-form',
@@ -7,9 +10,20 @@ import { Component } from '@angular/core';
 })
 export class CheckoutFormComponent {
 
-  constructor() { }
+  states: Observable<any>;
+  showPopup=  false;
+
+  constructor(public http: HttpClient, private router: Router) {
+    this.states = http.get('http://localhost:8000/states');
+  }
 
   logForm(value) {
     console.log(value);
+    this.http.put('http://localhost:8000/checkout', value).subscribe(success => this.showPopup = true);
+  }
+
+  goToHome() {
+    this.showPopup = false;
+    this.router.navigateByUrl('/');
   }
 }