错误 TypeError:使用构造函数“FormGroup”从对象开始>将循环结构转换为 JSON

ERROR TypeError: Converting circular structure to JSON --> starting at object with constructor 'FormGroup'

提问人:Faouzeya 提问时间:7/25/2019 最后编辑:Faouzeya 更新时间:8/25/2019 访问量:18981

问:

我在 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

enter image description here

评论

2赞 Chellappan வ 7/25/2019
您正在将反应式表单与模板驱动的表单混合在一起,不要这样做 检查角度 doc:angular.io/guide/forms-overview

答:

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!! :-)