错误TypeError：将圆形结构转换为JSON->从具有构造函数'FormGroup'的对象开始

Question

我正在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时得到的：

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

告诉我那是怎么回事：）

Answer 2

您可以尝试以下方法：

this.restApi.createEmployee(this.employeeDetails.value).subscribe((data: 
{}) => {
      this.router.navigate(['/employees-list'])
    })
    alert('SUCCESS!! :-)