angular - 错误类型错误 : Converting circular structure to JSON --> starting at object with constructor 'FormGroup'

Question

我正在 Angular 7 上设置表单，每次输入正确的字段时都会收到此错误:姓名、电子邮件和电话。然后我点击按钮 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 时得到的结果:

Answer 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()))

告诉我后来怎么样了:)