I went through existing questions regarding this topic but I was not able to find a solution for my case. I am new to javascript, jquery. I have this code

let form = angular.element('form');
          form.attr('action', url);
          form.attr('method', 'get');
          form.attr('name', filename);
          if (fieldName != null) {
            $('<input type="hidden" name = "field" value = "' + fieldName + '"/>').appendTo(form);
          }
          form.trigger('submit');

the url is an api call. This performs download of a file. I am trying to handle if there is an error for which I tried using ajax, jquery

let form = angular.element('form');

 form.submit(function(){
            $.ajax({
              async: false,
              url: url,
              type: 'GET',
              cache: false,
              success: function(resp) {             
              },
              error: function(error) {
                toaster.error(error.responseText);
              }
            });
          });
form.trigger('submit');

this creates multiple(three in my case) toasters. and every subsequent error will just double the number of toasters. if I pass the url and type as form.attr() the error: block code does not get represented on the screen. How do I display the toaster on the screen or make the ajax call execute once? I am not using anchor element to download because it is causing some other problems. so using form.