title: ERROR TypeError: Converting circular structure to JSON --> starting at object with constructor 'FormGroup'
body: <p>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 <code>createEmployee</code>. Normally it will pass to the next page, but this time it didn't and it show me this Error.</p>
  
  <p>This is the html component:</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;div class="container custom-container"&gt;
      &lt;div class="col-md-12"&gt;
        &lt;h3 class="mb-3 text-center"&gt;Create Employee&lt;/h3&gt;
  
      &lt;form [formGroup]="employeeDetails" (ngSubmit)="addEmployee()"&gt;
        &lt;div class="form-group"&gt;
            &lt;label&gt;Name&lt;/label&gt;
          &lt;input type="text"  formControlName="name"  
      [(ngModel)]="employeeDetails.name" class = "form-control" [ngClass]="{ 
      'is-invalid': submitted &amp;&amp; f.name.errors }"&gt;
  
         &lt;div *ngIf="submitted &amp;&amp; f.name.errors" class="invalid-feedback"&gt;
            &lt;div *ngIf="f.name.errors.required"&gt;Name is required
  
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
            &lt;label&gt;Email&lt;/label&gt;
            &lt;input type="text" formControlName="email" 
      [(ngModel)]="employeeDetails.email" class="form-control" [ngClass]="{ 
      'is-invalid': submitted &amp;&amp; f.email.errors }" /&gt;
            &lt;div *ngIf="submitted &amp;&amp; f.email.errors" class="invalid-feedback"&gt;
                &lt;div *ngIf="f.email.errors.required"&gt;Email is required&lt;/div&gt;
                &lt;div *ngIf="f.email.errors.email"&gt;Email must be a valid email 
      address&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
            &lt;label&gt;Phone&lt;/label&gt;
            &lt;input type="text" formControlName="phone"  
      [(ngModel)]="employeeDetails.phone" class="form-control" [ngClass]="{ 
      'is-invalid': submitted &amp;&amp; f.phone.errors }" /&gt;
            &lt;div *ngIf="submitted &amp;&amp; f.phone.errors" class="invalid-feedback"&gt;
                &lt;div *ngIf="f.phone.errors.required"&gt;Phone is required&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;button class="btn btn-success btn-lg btn-block"&gt;Create 
      Employee&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>and this is the component.ts:</p>
  
  <pre><code>    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: 
      {}) =&gt; {
            this.router.navigate(['/employees-list'])
          })
          alert('SUCCESS!! :-)\n\n' + 
      JSON.stringify(this.employeeDetails.value))
  
        }
  </code></pre>
  
  <p>This is what i got when i click on <code>createEmployee</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/1U0oo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1U0oo.png" alt="enter image description here"></a></p>