Http get, Error handlings, Retrieving server data.

Dynamically loading form data(select list) languages from the server.
Retreiving a server generated dummy ID.

Author: merajuddin

src/app/home/home.component.html

@@ -1,4 +1,5 @@
-<div class="container">
+<h3 *ngIf="languages.length == 0">Loading form.......</h3>
+<div class="container" *ngIf="languages.length > 0">
   <h4>Employee Form</h4>
   <form #form="ngForm" (submit)="submitForm(form)" novalidate>
 <!-- FirstName field -->

src/app/home/home.component.ts

@@ -12,22 +12,29 @@ import { NgForm } from '@angular/forms';
 export class HomeComponent{
 
   constructor(private formPoster: FormPoster){
-
+    this.formPoster.getLanguages()
+    .subscribe(
+      data => this.languages = data.languages,
+      err => console.log('get error: ', err)
+    );
   }
 
+  //languages = ["English", "Spanish", "Other"]; //hardcoded values in select list for primary languages. 
+  languages = []; //get the values from the server.
+
   submitForm(form: NgForm){
     this.validatePrimaryLanguage(this.model.primaryLanguage);
       if(this.hasPrimaryLanguageError)
-      return;
+      return;  
 
     this.formPoster.postEmployeeForm(this.model)
     .subscribe(
       data => console.log('success: ', data),
-      err => console.log('error: ', err)
-    )
+      err => console.log('post error: ', err)
+    );
+
   }
 
-  languages = ["English", "Spanish", "Other"];
   hasPrimaryLanguageError: boolean = false;
 
   model = new Employee('', '', false, '', 'default');

src/app/services/form-poster.service.ts

@@ -14,10 +14,23 @@ export class FormPoster {
         return body.fields || { };
     }
 
+    extractLanguages(res: Response){
+        let body = res.json();
+        return body.data || { };
+    }
+
+
     private handleError(error: any){
-        console.error('post error: ' + error);
+        console.error('error: ' + error);
         return Observable.throw(error.statusText);
     }
+
+    getLanguages():Observable<any>{
+        return this.http.get('http://localhost:3100/getlanguages')
+        .map(this.extractLanguages)
+        .catch(this.handleError)
+    }
+    
     postEmployeeForm(employee: Employee):Observable<any>{
         let body = JSON.stringify(employee);
         let headers = new Headers({ 'Content-type': 'application/json' });