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>

Answer 2

为什么不使用Angular的反应形式？你无所不在的事情似乎很复杂。

请阅读：Angular Reactive Forms。这应该为您提供有关如何使用表单的足够信息。

定义表单控件后，您可以订阅valueChanges并做出相应的反应，同时仍然可以访问表单（和控件）值。

如何将表单数据发送到角度为2的服务器api？

2 个答案: