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

Question

I'm setting up Forms on Angular 7 and I got this error every time I enter the correct fields: name, email and phone. Then I click on the button createEmployee . Normally it will pass to the next page, but this time it didn't and it show me this Error.

This is the html component:

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

and this is the 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))

      }

This is what i got when i click on createEmployee :

Answer 1

First dont use [(ngModel)] and formControlName in the same time. It is obsolate as of Angular 6 I think.

You are trying to push a form in the request instead of an object this is why the problem occurs. Try this:

this.restApi.createEmployee(this.employeeDetails.getRawValue()).subscribe((data: 
{}) => {
      this.router.navigate(['/employees-list'])
    })
    alert('SUCCESS!! :-)\n\n' + 
JSON.stringify(this.employeeDetails.getRawValue()))

Tell me how it went after that :)

Answer 2

You can try this:

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