wake-up-neo.com

Angular 2 Formularserialisierung im JSON-Format

Ich habe Probleme beim Erstellen meines Angular 2-Formulars und der Konvertierung der übermittelten Daten in das JSON-Format, um es an meine API zu senden. Ich suche etwas, das diesem Beispiel sehr ähnlich ist: $.fn.serializeObject = function() http://jsfiddle.net/sxGtM/3/
Das einzige Problem bei diesem Beispiel ist, dass der Code in JQuery geschrieben ist, während ich versuche, streng winklige 2. .. __ zu verwenden.

jsonformsangular
6
Tristan C

Sie können die Funktion getRawValue() verwenden, wenn Sie eine FormGroup verwenden, um ein Objekt zurückzugeben, das mit JSON.stringify() serialisiert werden kann. 

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)
            );
    }
}
15
Federico Pettinella

Sie können JSON.stringify(form.value) verwenden:

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

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

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

Ergebnis in Chrome DevTools:  Result of console.log

2
Mahesh Nepal

Sie suchen nach JSON.stringify(object), die Ihnen die JSON-Darstellung Ihres Javascript-Objekts geben wird. 

Sie können dies dann mit dem integrierten HTTP-Dienst auf Ihrem Server POST durchführen.

1
Alexander Ciesielski