title: angular2 submitting form values
body: <p>I need to get the form values but when I console.log the parameter in profile-create.ts that I had passed from profile-create.html I get value undefined and I need to save the form values to database. I am not being able to figure out this issue.</p>
  
  <pre><code>&gt;&gt; Profile-create.component.html
  
  &lt;!--&lt;md-dialog-content&gt;--&gt;
  
  &lt;form class="add-contact-form" #f="ngForm" (ngSubmit)="submitForm(value)"&gt;
    &lt;div class="md-dialog-header"&gt;
      &lt;h1 md-dialog-title&gt;
       &lt;md-icon&gt; person_add&lt;/md-icon&gt;
    Add Account Profile
    &lt;/h1&gt;
   &lt;/div&gt;
   &lt;div md-dialog-content&gt;
     &lt;div class="form-group"&gt;
       &lt;label&gt;Legal Name&lt;/label&gt;
       &lt;input type="text"  [(ngModel)]="profile.dbaName" required&gt;
     &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;DBA Name&lt;/label&gt;
      &lt;input type="text" [(ngModel)]="profile.status" required&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;Address&lt;/label&gt;
      &lt;input type="text" required&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;Email Address&lt;/label&gt;
      &lt;input type="text" required&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div md-dialog-actions&gt;
    &lt;button md-button (click)="dialogRef.close('cancel')"&gt;CANCEL&lt;/button&gt;
    &lt;button type="submit" class="btn btn-success" [disabled]="!f.form.valid"&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>profile-create.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { MdDialogRef } from '@angular/material';
  import { Router } from '@angular/router';
  
  import { CookieService } from 'angular2-cookie/services/cookies.service';
  
  import { AppConstant } from '../../../shared/constant/app-constant';
  import { ProfileService } from '../profile.service';
  import { Profile } from '../profile';
  import { UrlConstant } from '../../../shared/constant/url-constant';
  
  @Component({
    selector: 'app-profile-create',
    templateUrl: './profile-create.component.html',
    styleUrls: ['./profile-create.component.scss', '../../shared/assets/dialog.scss'],
    providers: [CookieService, ProfileService]
  })
  export class ProfileCreateComponent implements OnInit {
  
    constructor(
      public dialogRef: MdDialogRef&lt;ProfileCreateComponent&gt;,
      private profileService: ProfileService,
      private cookieService: CookieService,
      private router: Router) {
    }
  
    ngOnInit(){
    }
  
    profile: Profile = new Profile("hello" , "active" , true);
  
    submitForm(val){
      console.log(val , "OOOOOOOO");
      this.dialogRef.close('form submitted');
  
      const authToken: string = this.cookieService.get(AppConstant.AUTH_TOKEN_COOKIE);
  const organizationId: string = this.cookieService.get(AppConstant.SIGN_IN_ORGANIZATION_ID_COOKIE);
  
  this.profileService.createProfile({ authToken: authToken }, { organizationId: organizationId } , val)
        .subscribe((profile) =&gt; {
          this.router.navigate([`/admin/${UrlConstant.PROFILES}/`, profile.id]);
        })
     }
  }
  </code></pre>
  
  <p>profile.ts</p>
  
  <pre><code> export class Profile {
    id: number;
    dbaName: string;
    status: string;
    isDefault: boolean;
    address: string;
    phoneNumber: string;
    legalName: string;
    language: string;
    timezone: string;
    email: string;
  
    constructor(dbaName: string, status: string, isDefault:boolean) {
      this.dbaName = dbaName;
      this.status = status;
      this.isDefault = isDefault;
    }
  }
  </code></pre>
  
  <p>profile.service.ts</p>
  
  <pre><code>import { Injectable } from "@angular/core";
  import { Http, Headers, Response } from "@angular/http";
  import { Observable } from "rxjs/Rx";
  import { Profile } from "./profile";
  import { environment } from "../../../environments/environment";
  import { UrlConstant } from "../../shared/constant/url-constant";
  
  @Injectable()
  export class ProfileService {
    constructor(private http: Http) {
    }
  
    private headers = new Headers({ 'Content-Type': 'application/json' });
    private authApiUri = environment ['BP_AUTH_SERVER_URI'];
  
  
  createProfile(headers, path, data): Observable&lt;Profile&gt; {
       this.headers.set('Authorization', headers.authToken);
      return  this.http.post(`${this.authApiUri}/${UrlConstant.PROFILE_LIST.replace(':organizationId', path.organizationId)}`, data, { headers: this.headers })
        .map(response =&gt; {
          const profileResponse = response.json().account;
          let profile = new Profile(profileResponse.dbaName, profileResponse.status, profileResponse.isDefault);
          profile.id = profileResponse.id;
          return profile;
       })
        .catch(this.handleError);
    }
  </code></pre>