Angular 2表单序列化为JSON格式

发布时间：2020-12-17 09:04:09 所属栏目：安全来源：网络整理

导读：我在创建Angular 2表单时遇到了一些麻烦,并将提交的数据转换为 JSON格式,以便将其提交给我的API.我正在寻找与此示例非常相似的内容： $.fn.serializeObject = function() http://jsfiddle.net/sxGtM/3/这个例子的唯一问题是代码是用JQuery编写的,而我正在尝

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

如果您正在使用FormGroup,则可以使用getRawValue()函数返回可以使用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)
            );
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!