I'm having an issue with an API that provides data and a destination website URL. In my Angular component, I am attempting to call this API, create a form element, update the URL and data in the form, and then submit it.
Here is the code I have been using:
this._apiService.generateData()
.subscribe((response) => {
const form = `<form method="post" target="_blank" action=${response.destination}><input type="hidden" name="TestResponse" value=${response.testResponse}/></form>`;
const node = new DOMParser().parseFromString(form , "text/html");
const formElement = node.body.getElementsByTagName("form").item(0) as HTMLFormElement;
formElement.submit();
});
If I add the form tag to the component's HTML file and use this TypeScript approach instead, everything works fine:
this._apiService.generateData()
.subscribe((response) => {
const form = document.getElementById("test-form") as HTMLFormElement;
form.setAttribute("action", response.destination);
const inputElement = document.getElementById("test-input") as HTMLInputElement;
inputElement.value = response.testResponse;
form.submit();
});
Does anyone have insight into why this discrepancy exists?