javascript - 一个组件中的 ngForm 给出表单值，其他组件中的相同代码给出未定义

Question

    <form class="login-form" #loginForm="ngForm" (ngSubmit)="authenticateUser(loginForm)">
      <input name="username" type="text" placeholder="gebruikersnaam" />
      <input name="password" type="password" placeholder="wachtwoord" />
      <button type="submit">login</button>
    </form>

工作组件的html代码是这样的。

    <form class="register-form" #loginForm="ngForm" (ngSubmit)="registerUser(loginForm)">
      <input name="test" type="text" placeholder="gebruikersnaam" />
      <input name="password" type="password" placeholder="wachtwoord" />
      <input name="email" type="email" placeholder="email" />
      <input name="firstname" type="text" placeholder="voornaam" />
      <input name="lastname" type="text" placeholder="familienaam" />
      <button type="submit">Registreer</button>
    </form>

无工作代码如下所示，相同，但有 5 个字段而不是 2 个。我将在下面发布我的 component.ts 代码来向您展示这些文件。

我希望有人能帮助我解决为什么我的表单值在寄存器组件中未定义的问题。

我的登录页面很简单，但我的注册有问题。

提前致谢!

工作 ts 文件:

import { Component, OnInit } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { NgForm } from '@angular/forms';

import { User } from '../user';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  endpoint: String;
  constructor(private http: Http) {
    this.endpoint = "http://localhost:3000/";
  }

  ngOnInit() {
  }

  authenticateUser(form: NgForm) {
    console.log(form);
    const header = new Headers();
    header.append('Content-Type', 'application/json');
    let user = '{' + '\"username\":\"' + form.value.username + '\",\"password\":\"' + form.value.password + '}';
    return this.http.post(this.endpoint + 'users/login', user, { headers: header })
      .map(res => res.json());
  }

}

没有工作 ts 文件:

import { Component, OnInit } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { NgForm } from '@angular/forms';

import { User } from '../user';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
  private user;  
  endpoint: String;
  constructor(private http: Http) {     
    this.endpoint = "http://localhost:3000/";
  }

  ngOnInit() {
  }

  registerUser(form: NgForm) {
    console.log(form.value);
    const header = new Headers();
    header.append('Content-Type', 'application/json');
    let user = '{' + '\"username\":\"' + form.value.username + '\",\"password\":\"' + form.value.password + '\",\"email\":\"' + form.value.email + '\",\"lastName\":\"' + form.value.lastname + '\",\"firstName\":\"' + form.value.firstname +'}';
    return this.http.post(this.endpoint + 'users/signup', user, { headers: header })
      .map(res => res.json());
  }

}

Answer 1

您需要将“ngModel”添加到您的输入中才能访问 registerUser 方法中的 form.value。

更改为:

<form class="login-form" #loginForm="ngForm" (ngSubmit)="authenticateUser(loginForm)">
      <input name="username" type="text" placeholder="gebruikersnaam" ngModel />
      <input name="password" type="password" placeholder="wachtwoord" ngModel />
      <button type="submit">login</button>
    </form>

并致:

<form class="register-form" #loginForm="ngForm" (ngSubmit)="registerUser(loginForm)">
      <input name="test" type="text" placeholder="gebruikersnaam" ngModel />
      <input name="password" type="password" placeholder="wachtwoord" ngModel />
      <input name="email" type="email" placeholder="email" ngModel />
      <input name="firstname" type="text" placeholder="voornaam" ngModel />
      <input name="lastname" type="text" placeholder="familienaam" ngModel />
      <button type="submit">Registreer</button>
    </form>