Angular 2表单序列化为JSON格式

Question

我在创建Angular 2表单时遇到了一些麻烦，并将提交的数据转换为JSON格式，以便将其提交给我的API。我正在寻找与此示例非常相似的内容： $.fn.serializeObject = function() http://jsfiddle.net/sxGtM/3/这个例子的唯一问题是代码是用JQuery编写的，而我试图使用严格的角度2。 任何帮助将不胜感激，我仍然是一个非常新的角度。

Answer 1

如果您使用getRawValue()，则可以使用FormGroup功能返回可以使用JSON.stringify()序列化的对象。

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { Http } from '@angular/http';

@Component({
    selector: 'my-component',
    templateUrl: 'my-component.component.html'
})
export class MyComponent implements OnInit {

    form: FormGroup;

    constructor(private fbuilder: FormBuilder,
                private http: Http) { }

    ngOnInit(){
        this.form = this.fbuilder.group({
            name: '',
            description: ''
        });
    }

    sendToAPI(){
        let formObj = this.form.getRawValue(); // {name: '', description: ''}

        let serializedForm = JSON.stringify(formObj);

        this.http.post("www.domain.com/api", serializedForm)
            .subscribe(
                data => console.log("success!", data),
                error => console.error("couldn't post because", error)
            );
    }
}

Answer 2

您可以使用JSON.stringify(form.value)：

submit() {
  let resource = JSON.stringify(this.form.value);

  console.log('Add Button clicked: ' + resource);

  this.service.create(resource)
    .subscribe(response => console.log(response));
}

Chrome DevTools的结果：

Answer 3

您正在寻找JSON.stringify(object)，它将为您提供javascript对象的JSON represantation。

然后，您可以使用内置的HTTP服务将其POST到您的服务器。