angular2 submitting form values

Question

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.

>> Profile-create.component.html

<!--<md-dialog-content>-->

<form class="add-contact-form" #f="ngForm" (ngSubmit)="submitForm(value)">
  <div class="md-dialog-header">
    <h1 md-dialog-title>
     <md-icon> person_add</md-icon>
  Add Account Profile
  </h1>
 </div>
 <div md-dialog-content>
   <div class="form-group">
     <label>Legal Name</label>
     <input type="text"  [(ngModel)]="profile.dbaName" required>
   </div>
  <div class="form-group">
    <label>DBA Name</label>
    <input type="text" [(ngModel)]="profile.status" required>
  </div>
  <div class="form-group">
    <label>Address</label>
    <input type="text" required>
  </div>
  <div class="form-group">
    <label>Email Address</label>
    <input type="text" required>
  </div>
</div>
<div md-dialog-actions>
  <button md-button (click)="dialogRef.close('cancel')">CANCEL</button>
  <button type="submit" class="btn btn-success" [disabled]="!f.form.valid">Submit</button>
</div>

profile-create.component.ts

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<ProfileCreateComponent>,
    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) => {
        this.router.navigate([`/admin/${UrlConstant.PROFILES}/`, profile.id]);
      })
   }
}

profile.ts

 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;
  }
}

profile.service.ts

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<Profile> {
     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 => {
        const profileResponse = response.json().account;
        let profile = new Profile(profileResponse.dbaName, profileResponse.status, profileResponse.isDefault);
        profile.id = profileResponse.id;
        return profile;
     })
      .catch(this.handleError);
  }

shouldn't this (ngSubmit)="submitForm(value)" be (ngSubmit)="submitForm(f.value)" — Garth Mason
– Garth Mason, Commented Apr 4, 2017 at 3:57

Vinit Sarvade · Accepted Answer · 2017-04-04 04:03:11Z

1

Your submit method is passing the wrong parameter. You need to pass the local reference that you have created. i.e. (ngSubmit)="submitForm(f)". And in your method you can access the form values like

submitForm(form) {
     console.log(form.value);
}

answered Apr 4, 2017 at 4:03

Vinit Sarvade

7406 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roger Jacob · Accepted Answer · 2017-04-04 04:05:59Z

1

As per Angular 2, you need to add name attribute along with ngModel like and now from the component you can access the input fields.

answered Apr 4, 2017 at 4:05

Roger Jacob

3602 silver badges12 bronze badges

Comments

Sajeetharan · Accepted Answer · 2017-04-04 04:07:24Z

0

what is value as a parameter inside the submitForm? You do not have to pass any parameter. Just change it like this,

<form class="add-contact-form" #f="ngForm" (ngSubmit)="submitForm(f)">

and inside the Component.ts

doSubmit(form) {
 console.log(form.value);
}

}

edited Apr 4, 2017 at 4:07

answered Apr 4, 2017 at 3:59

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Collectives™ on Stack Overflow

angular2 submitting form values

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related