提问人:Faouzeya 提问时间:7/25/2019 最后编辑:Faouzeya 更新时间:8/25/2019 访问量:18981
错误 TypeError:使用构造函数“FormGroup”从对象开始>将循环结构转换为 JSON
ERROR TypeError: Converting circular structure to JSON --> starting at object with constructor 'FormGroup'
问:
我在 Angular 7 上设置 Forms,每次输入正确的字段时都会收到此错误:姓名、电子邮件和电话。然后我点击按钮.通常它会传递到下一页,但这次没有,它向我显示此错误。createEmployee
这是 html 组件:
<div class="container custom-container">
<div class="col-md-12">
<h3 class="mb-3 text-center">Create Employee</h3>
<form [formGroup]="employeeDetails" (ngSubmit)="addEmployee()">
<div class="form-group">
<label>Name</label>
<input type="text" formControlName="name"
[(ngModel)]="employeeDetails.name" class = "form-control" [ngClass]="{
'is-invalid': submitted && f.name.errors }">
<div *ngIf="submitted && f.name.errors" class="invalid-feedback">
<div *ngIf="f.name.errors.required">Name is required
</div>
</div>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" formControlName="email"
[(ngModel)]="employeeDetails.email" class="form-control" [ngClass]="{
'is-invalid': submitted && f.email.errors }" />
<div *ngIf="submitted && f.email.errors" class="invalid-feedback">
<div *ngIf="f.email.errors.required">Email is required</div>
<div *ngIf="f.email.errors.email">Email must be a valid email
address</div>
</div>
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" formControlName="phone"
[(ngModel)]="employeeDetails.phone" class="form-control" [ngClass]="{
'is-invalid': submitted && f.phone.errors }" />
<div *ngIf="submitted && f.phone.errors" class="invalid-feedback">
<div *ngIf="f.phone.errors.required">Phone is required</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-success btn-lg btn-block">Create
Employee</button>
</div>
</form>
</div>
</div>
这是 component.ts:
import { Component, OnInit , Input} from '@angular/core';
import { Router } from '@angular/router';
import { RestApiService } from "../shared/rest-api.service";
import { ReactiveFormsModule , FormsModule, FormControl} from
'@angular/forms'
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MustMatch } from '../helpers/must-match.validator';
@Component({
selector: 'app-employee-create',
templateUrl: './employee-create.component.html',
styleUrls: ['./employee-create.component.css']
})
export class EmployeeCreateComponent implements OnInit {
employeeDetails: FormGroup;
submitted = false;
constructor(
private formBuilder: FormBuilder,
public restApi: RestApiService,
public router: Router
) { }
ngOnInit() {
this.employeeDetails = this.formBuilder.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
phone: ['', Validators.required],
});
}
get f() { return this.employeeDetails.controls; }
addEmployee(dataEmployee) {
this.submitted=true;
if (this.employeeDetails.invalid) {
return;
}
this.restApi.createEmployee(this.employeeDetails).subscribe((data:
{}) => {
this.router.navigate(['/employees-list'])
})
alert('SUCCESS!! :-)\n\n' +
JSON.stringify(this.employeeDetails.value))
}
这是我点击时得到的:createEmployee
答:
5赞
Viktor
7/25/2019
#1
首先不要同时使用 [(ngModel)] 和 formControlName。我认为从 Angular 6 开始,它已经过时了。
您正在尝试在请求中推送表单而不是对象,这就是出现问题的原因。试试这个:
this.restApi.createEmployee(this.employeeDetails.getRawValue()).subscribe((data:
{}) => {
this.router.navigate(['/employees-list'])
})
alert('SUCCESS!! :-)\n\n' +
JSON.stringify(this.employeeDetails.getRawValue()))
告诉我在那:)之后情况如何
0赞
Leandro Hernández Mira
8/25/2019
#2
你可以试试这个:
this.restApi.createEmployee(this.employeeDetails.value).subscribe((data:
{}) => {
this.router.navigate(['/employees-list'])
})
alert('SUCCESS!! :-)
评论