web-dev-qa-db-fra.com

Angular 2 Sérialisation de formulaire au format JSON

J'ai un peu de difficulté à créer mon formulaire Angular 2 et à convertir les données soumises au format JSON pour pouvoir les envoyer à mon API. Je cherche quelque chose qui fonctionne très semblable à cet exemple: $.fn.serializeObject = function() http://jsfiddle.net/sxGtM/3/
Le seul problème avec cet exemple est que le code est écrit en JQuery, alors que j'essaie d'utiliser strictement un angulaire 2. Toute aide serait grandement appréciée, je suis encore très novateur en angulaire.

jsonformsangular
6
Tristan C

Vous pouvez utiliser la fonction getRawValue() si vous utilisez une FormGroup pour renvoyer un objet qui peut ensuite être sérialisé à l'aide de 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)
            );
    }
}
15
Federico Pettinella

Vous pouvez utiliser 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));
}

Résultat dans Chrome DevTools:  Result of console.log

2
Mahesh Nepal

Vous recherchez JSON.stringify(object) qui vous donnera la représentation JSON de votre objet javascript. 

Vous pouvez ensuite POST utiliser le service HTTP intégré à votre serveur.

1
Alexander Ciesielski