Question

我需要获取表单值，但是当我在console.log中从profile-create.html传递的profile-create.ts中的参数时，我得到的值未定义，我需要将表单值保存到数据库中。我无法弄清楚这个问题。

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

轮廓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);
  }

Answer 1

您的提交方法传递了错误的参数。您需要传递已创建的本地引用。即(ngSubmit)="submitForm(f)"。在您的方法中，您可以访问表单值，如

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

Answer 2

根据Angular 2，您需要添加name属性以及类似的ngModel，现在可以从组件中添加输入字段。

Answer 3

submitForm 中的参数值是多少？您不必传递任何参数。只需改变它，

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

并在Component.ts内部

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

}

angular2提交表单值

3 个答案: