route getting called two times in angular and laravel

I have created contact us form in angular code, submit function code is as follows:

export class ContactComponent implements OnInit {

  baseUrl = environment.baseUrl;
  mailForm: FormGroup;
  submitted = false;
  constructor(private http: HttpClient, private formBuilder: FormBuilder) { }

  get f() { return this.mailForm.controls; }
  onSubmit() {
  
    this.submitted = true;
    // stop here if form is invalid
    if (this.mailForm.invalid) {
        return;
    }
    //True if all the fields are filled
    if(this.submitted)
    {
      
      // Initialize Params Object
       var myFormData = new FormData();
    
     // Begin assigning parameters
    
        myFormData.append('name', this.mailForm.value.firstname);
        myFormData.append('myEmail', this.mailForm.value.email);
        myFormData.append('mobile', this.mailForm.value.mobile);
        myFormData.append('message', this.mailForm.value.message);
      //post request
      return this.http.post(this.baseUrl+'api/contact-us'
      , myFormData).subscribe((res: Response) => {
        
  
    });  
    }
   
  }

HTML Component:

<form [formGroup]="mailForm" (ngSubmit)="onSubmit()">
<button type="submit" class="btn-login" [disabled]="submitted">Send</button>
</form>

Laravel Routes :

Route::group(['middleware' => ['api','cors']], function ($router) {
    Route::post('/contact-us', [SiteController::class, 'contactUs']);
});

Chrome console:

Issue is when i click submit button routes are being called two times

Thanks

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/3knUcjJ
via IFTTT