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

您需要添加＆＃34; ngModel＆＃34;在您的输入中，以便访问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>

一个组件中的ngForm给出了表单值，其他组件中的相同代码给出了undefined

1 个答案: