2016-09-26 3 views
3

У меня возникли проблемы с созданием формы Angular 2 и преобразованием представленных данных в формат JSON для использования в моем API. Я ищу что-то, что работает очень похоже на этот пример: $.fn.serializeObject = function() http://jsfiddle.net/sxGtM/3/
Единственная проблема с этим примером заключается в том, что код написан в JQuery, тогда как я пытаюсь использовать строго угловой 2. Любая помощь будет принята с благодарностью , Я все еще очень новичок в угловой.Угловая 2 Сериализация формы в формате JSON

+0

если вы используете угловой, то почему нет ngmodel в вашем входе? –

+0

Потому что это был пример, который я нашел, а не мой код. Я хочу реализовать что-то похожее на этот пример, используя угловые 2 –

ответ

1

Вы ищете JSON.stringify(object), который предоставит вам JSON-представление вашего объекта javascript.

После этого вы можете использовать POST с помощью встроенного HTTP-сервиса на свой сервер.

8

Если вы используете 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) 
      ); 
    } 
} 
0

Вы можете использовать JSON.stringify (form.value). Пожалуйста, обратитесь к прилагаемым изображениям.

enter image description here

Console Log: Console Log:

Смежные вопросы