I have external angular application used as external question in AWS Mechanical Turk. I have a form in this angular application, and I try to submit it with accordance of the documentation of AWS: external form documentation.
The goal is, as I understand it, is to submit the form to this address:
https://workersandbox.mturk.com/mturk/externalSubmit?assignmentId=...
When I try to use the http client to post to this address, like so:
HTML:
<form (ngSubmit)="onSubmit()">
...
<button mat-raised-button color="primary" type="submit">Submit</button>
</form>
TS, in onSubmit:
// submit to mturk
this.http.post(`https://workersandbox.mturk.com/mturk/externalSubmit?assignmentId=${this.currentAssignmetID[0]}`, {
assignmentId: this.currentAssignmetID[0]
}).subscribe(data => {
console.log('data from submit to mturk: ', data);
});
I get CORS error.
When I was reading about this issue, I got the idea that Mechanical Turk is waiting for the iframe to "redirect" to this address, and not to send an external http request.
So I changed the HTML file to this:
<form [formGroup]="qualifierForm" [action]="postExternalURl" method="POST">
...
and had "postExternalURl" variable to hold the external URL.
Now the problem is that nothing seems to happen. I see the application load, I fill the form, and press submit - and I don't get any indication that anything is happening, and in my requester sandbox I don't see any assignments registered. Can anyone shed some light on this issue? Why is the submission failing? And in general - what do I need to do in this case - angular form - in order to submit my assignment as a worker?
Thanks
I solved the issue, and I'm posting the solution for anyone to use, should they encounter the same situation as I did.
The HTML form. In order for this form to work as external question in mechanical turk (at least in my experience), the form needs to be in old-school html form style, and not angular reactive style form.
The definition of the form in my case needed to be:
<form #form ngNoForm [formGroup]="formName" [action]="postExternalURl" method="post">
Now, In order for mechanical turk to register the submission, the method "form.submit()" (you can replace "form" with however you named the # in the form definition line) has to be called. You can do that directly from the submition button:
<button mat-raised-button color="primary" type="submit"
[disabled]="!formName.valid" (click)="form.submit()">Submit</button>
But if you need more logic to be used before you submit the form, you can change the button definition in HTML to:
<button mat-raised-button color="primary" type="submit"
[disabled]="!formName.valid" (click)="onSubmit(form)">Submit</button>
And in the "onSubmit" method call "form.submit()".
And that's it. When I loaded this form as an external question in mechanical turk, the submission worked properly.