从外部问题（angular 表单）发布到 Mechanical Turk 失败或什么都不做

Question

我有外部 angular 应用程序用作 AWS Mechanical Turk 中的外部问题。我在这个 angular 应用程序中有一个表单，我尝试按照 AWS 的文档提交它： external form documentation.

据我了解，目标是将表单提交到此地址：

https://workersandbox.mturk.com/mturk/externalSubmit?assignmentId=...

当我尝试使用 http 客户端 post 到这个地址时，像这样：

HTML:

<form (ngSubmit)="onSubmit()">
...
<button mat-raised-button color="primary" type="submit">Submit</button>
</form>

TS，在提交中：

// 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);
});

我收到 CORS 错误。

当我读到这个问题时，我想到 Mechanical Turk 正在等待 iframe“重定向”到这个地址，而不是发送外部 http 请求。

所以我将 HTML 文件更改为：

<form [formGroup]="qualifierForm" [action]="postExternalURl" method="POST">

...

并且有“postExternalURl”变量来保存外部 URL。

现在的问题是，似乎什么也没有发生。我看到应用程序加载，我填写了表格，然后按提交 - 我没有得到任何迹象表明正在发生任何事情，并且在我的请求者沙箱中我没有看到任何已注册的分配。任何人都可以阐明这个问题吗？为什么提交失败？一般来说 - 在这种情况下我需要做什么 - angular 表格 - 才能提交我作为工作人员的任务？

谢谢

Answer 1

我解决了这个问题，我发布了解决方案供任何人使用，如果他们遇到与我相同的情况。

HTML 形式。为了使这种形式在 Mechanical Turk 中作为外部问题工作（至少根据我的经验），形式需要采用 old-school html 形式，而不是 angular 反应式形式.

在我的案例中，表单的定义需要是：

<form  #form ngNoForm [formGroup]="formName" [action]="postExternalURl" method="post">

现在，为了让 Mechanical Turk 注册提交，方法“form.submit()”（您可以将“表单”替换为您在表单定义行中命名 # 的任何方式）必须是叫。您可以直接从提交按钮执行此操作：

<button mat-raised-button color="primary" type="submit"
                                    [disabled]="!formName.valid" (click)="form.submit()">Submit</button>

但是如果你需要在提交表单之前使用更多的逻辑，你可以将HTML中的按钮定义更改为：

<button mat-raised-button color="primary" type="submit"
                                [disabled]="!formName.valid" (click)="onSubmit(form)">Submit</button>

并在“onSubmit”方法中调用“form.submit()”。

就是这样。当我在 Mechanical Turk 中加载此表单作为外部问题时，提交工作正常。

从外部问题（angular 表单）发布到 Mechanical Turk 失败或什么都不做

posting to mechanical turk from external question (angular form) fail or does nothing

javascript

forms

mechanicalturk

angular