如何避免在Angular 4上多次重复相同的API？

Question

It is seen that when I submit a form on Angular 4, it makes 2 calls for a single call. When I check the log it is came to know that it is hitted two times. How can I over come this.? When I submit all forms it inserted two times the same form data

Component on project

Service I have Used

Answer 1

1. As Chrillewoodz mentioned it can be OPTIONS request. This is pre-flight request made by some browsers as a safety measure to ensure that the request being done is trusted by the server. You can`t disable it.

2. If it is not an OPTIONS request make sure you don`t have "click" event on a 'submit' button and "ngSubmit" on a form itself. Like this:

Answer 2

you can solve it by make a boolean variable apiCalled and if it is false don't call your api otherwise call it

@Injectable()
export default class myService {
    apiCalled: boolean = false;
    consturctor(private Http _http){

    }
    callApi() {
        if(apiCall)
            return;
        else {
            this.apiCall = true;
            this._http.get("write url").subscripe(
                res => {

                }, err => {
                }, ()=> {
                    this.apiCall = false;
                } 
            )
        }
    }
}

and once he finished calling the api you will be able to call that api again