如何使用angular 2将表单数据发送到服务器api? [英] How to send form data to the server api with angular 2?

问题描述

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

I'm trying to post data from a small registration form to the server

自三天以来，我一直处于这种状态，我不知道该怎么做，我仍然是Angular 2的初学者，我需要一些有关如何发布此数据的指导: 我的html:

I've been stuck in this since three days now i don't know how to do it, i'm still beginner in Angular 2, I need some guidance in how to post this data: my 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());
  });
} }

如您所见，我只是尝试发布用户名只是为了测试，但是它没有用，并且我知道有什么错误或遗漏，但我不知道它是什么. 另外，我想知道如果我要发布多个数据(例如用户名和电子邮件)怎么写.

As you can see, I tried to post username only just to test but it didn't work and I know something is wrong or missing but I don't know what it is. Also I want to know what if I'm trying to post more than one data, like username and email, how to write it.

如果有任何演示或实时示例发送给您，是否需要更多数据或我没有写的任何内容，只需询问即可.

If you have any demos or live examples send it, if you need any more data or anything that I didn't write just ask.

推荐答案

这就是您的操作方式. stackblitz

This is how you do it. 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>

这篇关于如何使用angular 2将表单数据发送到服务器api?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！