angular - 如何使用 angular 2 将表单数据发送到服务器 api？

Question

我正在尝试将数据从一个小注册表单发布到服务器

三天以来我一直被困在这个问题上，我不知道该怎么做，我仍然是 Angular 2 的初学者，我需要一些关于如何发布这些数据的指导:我的 html:

<form>
  <div class="row col-md-12">
<input (keyup.enter) = "userName(name)" #name type="text" 
class="rounded-inputs25 col-md-3 first-name-input add-account-inputs" 
placeholder="First name" >
<input type="text" class="rounded-inputs25 col-md-3 last-name-input 
add-account-inputs" placeholder="Last name" >
  </div>
<input type="email" class="rounded-inputs25 col-md-6 add-account-
inputs" placeholder="Email" >
<input type="password" class="rounded-inputs25 col-md-6 add-account-
inputs" id="password" placeholder="Password" >
<input type="password" class="rounded-inputs25 col-md-6 add-account-
inputs" id="confirm_password" placeholder="Confirm password" >
  </form>

我的组件 ts:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import {Http} from '@angular/http';
declare const $;

@Component({
selector: 'app-add-account',
templateUrl: './add-account.component.html',
styleUrls: ['./add-account.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AddAccountComponent implements OnInit {
name: any[];
password: any[];
email: any[];
userNames: any[];
private url = 'i deleted it because it belongs to the company api';

constructor(private http: Http) {
}

userName(input: HTMLInputElement) {
let user = {name: input.value};
input.value = '';
this.http.post(this.url, JSON.stringify(user))
  .subscribe(response => {
    user['id'] = response.json().id;
    this.user.push(name);
    console.log(response.json());
  });
} }

如您所见，我只是为了测试而尝试发布用户名，但它没有用，我知道有什么地方不对或遗漏了，但我不知道它是什么。另外我想知道如果我尝试发布多个数据(如用户名和电子邮件)怎么写。

如果您有任何演示或现场示例，请将其发送，如果您需要更多数据或我没有写的任何内容，请尽管询问。

Answer 1

这就是您的做法。 stackblitz

组件

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { NgForm } from '@angular/forms';
import {HttpClient,HttpErrorResponse} from '@angular/common/http';
declare const $;

@Component({
  selector: 'app-add-account',
  templateUrl: './add-account.component.html',
  //styleUrls: ['./add-account.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AddAccountComponent implements OnInit {
  name: any[];
  password: any[];
  email: any[];
  userNames: any[];
  private url = 'https://jsonplaceholder.typicode.com/posts';

    constructor(private http: HttpClient) {
    }

    ngOnInit(){


    }
    // userName(input: HTMLInputElement) {
    //   let user = {name: input.value};
    //   debugger;
    //   //input.value = '';
    //   this.http.post(this.url, JSON.stringify(user))
    //     .subscribe(response => {
    //       alert(response);
    //     },(err: HttpErrorResponse) => {
    //       alert(err);
    //   });
    // }

    onSubmit(form: NgForm){
      var data = form.value;
      debugger;
      var myPostObject = {
        firstName:data.firstname,
        lastName:data.lastname,
        email:data.email,
        passWord:data.password,
      }
      this.http.post(this.url, myPostObject)
        .subscribe(response => {
          debugger;
          console.log(response);
        },(err: HttpErrorResponse) => {
          console.log(err);
      });
    }
}

HTML

<form #registerForm="ngForm" >
  <div class="row col-md-12">
<input  name="firstname" ngModel #firstname="ngModel" type="text" 
class="rounded-inputs25 col-md-3 first-name-input add-account-inputs" 
placeholder="First name" >
<input type="text" name="lastname" ngModel #lastname="ngModel" class="rounded-inputs25 col-md-3 last-name-input 
add-account-inputs" placeholder="Last name" >
  </div>
<input type="email" name="email" ngModel #email="ngModel" class="rounded-inputs25 col-md-6 add-account-
inputs" placeholder="Email" >
<input type="password" name="password" ngModel #password="ngModel" class="rounded-inputs25 col-md-6 add-account-
inputs" id="password" placeholder="Password" >
<input type="password" (keyup.enter)="onSubmit(registerForm)"  class="rounded-inputs25 col-md-6 add-account-
inputs" id="confirm_password" placeholder="Confirm password" >
  </form>