Ответ 1
Похоже, что ошибка связана с тем, что я пытался скомпоновать весь объект myForm, где, поскольку я хотел, было строчить только значения
правильный синтаксис
let Form = JSON.stringify(this.myForm.value);
TypeError: преобразование круговой структуры в JSON при попытке запроса POST
Я получаю ошибку в заголовке, и вот полная трассировка стека, я не уверен, что это такое, любое понимание приветствуется!
browser_adapter.js:84 EXCEPTION: Error in ./ParametersFormComponent class ParametersFormComponent - inline template:3:31BrowserDomAdapter.logError @ browser_adapter.js:84BrowserDomAdapter.logGroup @ browser_adapter.js:94ExceptionHandler.call @ exception_handler.js:65next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:86NgZone.runGuarded @ ng_zone.js:240outsideHandler @ dom_events.js:27ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423
browser_adapter.js:84 ORIGINAL EXCEPTION: TypeError: Converting circular structure to JSONBrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:74next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:86NgZone.runGuarded @ ng_zone.js:240outsideHandler @ dom_events.js:27ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423
browser_adapter.js:84 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:77next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:86NgZone.runGuarded @ ng_zone.js:240outsideHandler @ dom_events.js:27ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423
browser_adapter.js:84 TypeError: Converting circular structure to JSON
at Object.stringify (native)
at ParametersFormComponent.onSubmit (http://localhost:4200/main.bundle.js:61451:25)
at DebugAppView._View_ParametersFormComponent0._handle_ngSubmit_7_0 (ParametersFormComponent.ngfactory.js:1809:28)
at http://localhost:4200/main.bundle.js:57019:24
at SafeSubscriber.schedulerFn [as _next] (http://localhost:4200/main.bundle.js:11839:54)
at SafeSubscriber.__tryOrUnsub (http://localhost:4200/main.bundle.js:48280:16)
at SafeSubscriber.next (http://localhost:4200/main.bundle.js:48229:22)
at Subscriber._next (http://localhost:4200/main.bundle.js:48179:26)
at Subscriber.next (http://localhost:4200/main.bundle.js:48143:18)
at EventEmitter.Subject._finalNext (http://localhost:4200/main.bundle.js:9733:30)
at EventEmitter.Subject._next (http://localhost:4200/main.bundle.js:9725:18)
at EventEmitter.Subject.next (http://localhost:4200/main.bundle.js:9682:14)BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:78next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:86NgZone.runGuarded @ ng_zone.js:240outsideHandler @ dom_events.js:27ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423
browser_adapter.js:84 ERROR CONTEXT:BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:81next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:86NgZone.runGuarded @ ng_zone.js:240outsideHandler @ dom_events.js:27ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423
browser_adapter.js:84 DebugContext {_view: _View_ParametersFormComponent0, _nodeIndex: 7, _tplRow: 3, _tplCol: 31}BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:82next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:86NgZone.runGuarded @ ng_zone.js:240outsideHandler @ dom_events.js:27ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423
:4200/polyfills.bundle.js:3327 Uncaught EXCEPTION: Error in ./ParametersFormComponent class ParametersFormComponent - inline template:3:31
ORIGINAL EXCEPTION: TypeError: Converting circular structure to JSON
ORIGINAL STACKTRACE:
TypeError: Converting circular structure to JSON
at Object.stringify (native)
at ParametersFormComponent.onSubmit (http://localhost:4200/main.bundle.js:61451:25)
at DebugAppView._View_ParametersFormComponent0._handle_ngSubmit_7_0 (ParametersFormComponent.ngfactory.js:1809:28)
at http://localhost:4200/main.bundle.js:57019:24
at SafeSubscriber.schedulerFn [as _next] (http://localhost:4200/main.bundle.js:11839:54)
at SafeSubscriber.__tryOrUnsub (http://localhost:4200/main.bundle.js:48280:16)
at SafeSubscriber.next (http://localhost:4200/main.bundle.js:48229:22)
at Subscriber._next (http://localhost:4200/main.bundle.js:48179:26)
at Subscriber.next (http://localhost:4200/main.bundle.js:48143:18)
at EventEmitter.Subject._finalNext (http://localhost:4200/main.bundle.js:9733:30)
at EventEmitter.Subject._next (http://localhost:4200/main.bundle.js:9725:18)
at EventEmitter.Subject.next (http://localhost:4200/main.bundle.js:9682:14)
ERROR CONTEXT:
[object Object]
Navigated to http://localhost:4200/?
компонент
import {Component} from '@angular/core';
import { FormGroup, FormControl, REACTIVE_FORM_DIRECTIVES, Validators, AbstractControl, Control } from '@angular/forms';
import { Headers, Http, Response } from '@angular/http';
@Component({
selector: 'parameters-form',
directives: [REACTIVE_FORM_DIRECTIVES],
templateUrl: 'form.template.html'
})
export class ParametersFormComponent {
response: {};
myForm: FormGroup;
systemParameters: AbstractControl;
param: AbstractControl;
liftOperator: AbstractControl;
restrictOperator: AbstractControl;
xInitial: AbstractControl;
system_arr: number[];
param_arr: number[];
restrict_arr: number[];
lift_arr: number[];
xinitial_arr: number[];
constructor(private http: Http) {
this.myForm = new FormGroup({
'realisations' : new FormControl('', Validators.required),
'numConstSteps' : new FormControl('', Validators.required),
'timeHorizon': new FormControl('', Validators.required),
'continuationStep' : new FormControl('', Validators.required),
'continuationStepSign' : new FormControl('', Validators.required),
'numberOfModelParameters' : new FormControl('', Validators.required),
'systemParameters' : new FormControl(''),
'param' : new FormControl(''),
'netLogoFile' : new FormControl('', Validators.required),
'numberOfModelVariables' : new FormControl('', Validators.required),
'restrictOperator' : new FormControl(''),
'liftOperator' : new FormControl(''),
'xInitial' : new FormControl('')
});
this.system_arr = [];
this.param_arr = [];
this.restrict_arr = [];
this.lift_arr = [];
this.xinitial_arr = [];
this.param = this.myForm.controls["param"];
this.systemParameters = this.myForm.controls['systemParameters'];
this.restrictOperator = this.myForm.controls['restrictOperator'];
this.liftOperator = this.myForm.controls['liftOperator'];
this.xInitial = this.myForm.controls['xInitial'];
}
addToArray(event, value: number, target: string): void {
if (event.which === 13) {
switch (target) {
case 'systemParameters':
this.system_arr.push(value);
(<Control>this.systemParameters).updateValue('');
break;
case 'param':
this.param_arr.push(value);
(<Control>this.param).updateValue('');
break;
case 'liftOperator':
this.lift_arr.push(value);
(<Control>this.liftOperator).updateValue('');
break;
case 'restrictOperator':
this.restrict_arr.push(value);
(<Control>this.restrictOperator).updateValue('');
break;
case 'xInitial':
this.xinitial_arr.push(value);
(<Control>this.xInitial).updateValue('');
break;
}
}
}
deleteItem(value: any, target: string): void {
let pos = 0;
switch (target) {
case 'systemParameters':
pos = this.system_arr.indexOf(value);
this.system_arr.splice(pos, 1);
break;
case 'param':
pos = this.param_arr.indexOf(value);
this.param_arr.splice(pos, 1);
break;
case 'liftOperator':
pos = this.lift_arr.indexOf(value);
this.lift_arr.splice(pos, 1);
break;
case 'restrictOperator':
pos = this.restrict_arr.indexOf(value);
this.restrict_arr.splice(pos, 1);
break;
case 'xInitial':
pos = this.xinitial_arr.indexOf(value);
this.xinitial_arr.splice(pos, 1);
break;
}
}
isFullfilled(m: number, n: number) {
if (
m == this.restrict_arr.length
&& m == this.xinitial_arr.length
&& m == this.lift_arr.length
&& n == this.param_arr.length
&& n == this.system_arr.length
) {
if (m != 0 && n != 0 ){
return true;
}
}
return null;
}
onSubmit() {
this.myForm.value.systemParameters = this.system_arr;
this.myForm.value.liftOperator = this.lift_arr;
this.myForm.value.restrictOperator = this.restrict_arr;
this.myForm.value.param = this.param_arr;
this.myForm.value.xInitial = this.xinitial_arr;
let Form = JSON.stringify(this.myForm);
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http.post('http://localhost:3000/webhook', Form, { headers: headers })
.map((data: Response) => data.json())
.subscribe(
data => this.response = data,
error => console.log(error)
);
console.log('your submitted value:', this.myForm.value);
}
}
Работал хорошо, прежде чем я портировал его с Beta на RC5
Ответы
Ответ 2
Это, вероятно, из-за круговой зависимости в объекте. В этом случае невозможно выполнить строковое преобразование, но всегда можно войти в консоль браузера. Таким образом, мы можем создать очень простую pipeу для этой цели.
в app.module.ts:
import { LogPipe } from './log.pipe';
@NgModule({
declarations: [
//...
LogPipe,
],
})
export class AppModule {}
@Pipe({name: 'log'})
export class LogPipe implements PipeTransform {
public transform(value: object): void {
console.log(value);
return;
}
}
Тогда мы можем использовать канал для быстрой регистрации
{{'some text' | log}}
Ответ 3
В дополнение к уже предоставленным ответам, вот что вы можете сделать, когда намереваетесь опубликовать все значения формы.
Пример формы:
<form #formData="ngForm" (ngSubmit)="submit(formData)">
<input ngModel="my value" name="email" id="email" ...>
...
</form>
В тс:
submit(formData: any) {
const data = JSON.stringify(formData.value);
this.myService.postData(data)...
}
Вы получаете значения всей формы из formData.value, а затем преобразуете в строку, используя JSON.stringify(obj)
Надеюсь, это кому-нибудь поможет.