I'm not able to make a post request using FormGroup Angular 6

Question

I'm new to angular, I am not able to make a post request using formGroup. The body is being sent for all the fields that I have however, there is an error 400 (bad request) due to the following error: {"status":"error","errors":{"message":"A second operation started on this context before a previous operation completed. This is usually caused by different threads using the same instance of DbContext, however instance members are not guaranteed to be thread safe. This could also be caused by a nested query being evaluated on the client, if this is the case rewrite the query avoiding nested invocations."}}, I kind of understand what the error is about but I don't understand what's wrong with my code. thanks in advance

register.model.ts

export class User{
    FirstName: string;
    LastName: string;
    UserName: string;
    Email: string;
    Password: string;
}

register.service.ts

RegisterUser(user: User){
return this.http.post('url', user);

}

register.component.html

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">

  <div class="form-group row">
    <label class="col-sm-3 col-form-label">First Name:</label>
    <div class="col-sm-3">
      <input type="text" formControlName="FirstName" class="form-control"
        placeholder="First Name" ngModel>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">Last Name:</label>
    <div class="col-sm-3">
      <input type="text" formControlName="LastName" class="form-control"
        id="LastName" placeholder="LastName" ngModel>
    </div>
  </div>
  <div class="form-group row">
    <label for="UserName" class="col-sm-3 col-form-label">Username:</label>
    <div class="col-sm-3">
      <input type="text" formControlName="UserName" class="form-control"
        placeholder="User Name" ngModel>
    </div>
  </div>
  <div class="form-group row">
    <label for="Email" class="col-sm-3 col-form-label">Email:</label>
    <div class="col-sm-3">
      <input type="email" formControlName="Email" class="form-control"
        placeholder="example@example.com" ngModel>
    </div>
  </div>

  <div class="form-group row">
    <label for="password" class="col-sm-3 col-form-label">Password:</label>
    <div class="col-sm-3">
      <input type="password" formControlName="Password"  class="form-control"
        placeholder="*********" ngModel>
    </div>
  </div>

  <br>

  <p class="text-center">Already have an account? <span>
      <button (click)="goToSignIn();" class="unstyled-button">Sign In.</button>
    </span></p>

  <button type="submit" class="button button4">Sign Up</button>
</form>

register.component.ts

export class RegisterComponent implements OnInit {

user: User;
registerForm: FormGroup;

constructor(private router: Router, private userService: RegisterService, private toastr: 
          ToastrService, private fb: FormBuilder) { }

ngOnInit() {
  this.registerForm = this.fb.group({
    FirstName: ['', Validators.required],
    LastName: ['', Validators.required],
    UserName: ['', Validators.required],
    Email: ['', Validators.required],
    Password: ['', Validators.required],
  })
}


onSubmit(){
  return this.userService.RegisterUser(this.registerForm.value).subscribe((data:any) => {
    this.toastr.success('User Registered Successfully');
  }, error => {
    this.toastr.error('Registeration Failed');
  })
}

}

Answer 1

Try like this:

registerUser(user) : Observable<any> {
return this.http.post<any>('url', JSON.stringify(user), this.httpOptions).pipe(
    tap((user) => console.log(`user sent : ${JSON.stringify(user)}`)),
    catchError(this.handleError)
  );

};

the httpOptions are like this:

httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})

};

for catch error:

handleError(error) {
let errorMessage = '';
if(error.error instanceof ErrorEvent) {
// Get client-side error
errorMessage = error.error.message;
} else {
// Get server-side error
errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
}
window.alert(errorMessage);
return throwError(errorMessage);
}

Answer 2

This is not a javascript error that you are having the problem with. This is an error comming from Entity Framework.

Your DBContext is being used by two threads at the same time. It could be that it is used by two threads in the same request.

Check that your DBContext is not declared static for some reason.

You need to share your api code in order for us to debug your problem.