amp-html - 仅当某些条件与其他表单匹配时如何提交表单？

Question

我正在使用 AMP。我问的是用户的手机号码，然后hit api(let's X)。如果响应成功，则向用户显示结果，如果响应为error then I asked otp. 输入 otp 并单击 verify I 后hit api(let's Y)。api Y 的响应如下。

Response code=200
code=1 or 2 or 3
Response code=400
Message:"some error"

在successapi Y 和if code=1 then only I want to hit api X. 我不知道该怎么做。以下是我所做的。

<form method="post"
      id="form1" 
      action-xhr="url of X api" 
      on="submit-error:otpScreen.show">
.
.
.
</form>
<form method="get"
      action-xhr="url of Y api"
      on="submit-success:event.response.code==1?form1.submit:otpScreen.hide"  //here i getting syntax error
>
<div id='otpScreen'>.......</div>
</form>

甚至可以在第一个表格的某些条件下提交第二个表格吗？

Answer 1

您可以使用 amp-bind 禁用第二个表单的提交按钮，直到第一个表单被提交。例如：

<form id=form1 on="submit-success:AMP.setState({form1Success: true})">...</form>
<form id=form2>
   ...
  <input type=submit disabled [disabled]="!form1Success">
</form>

hidden...或者您可以使用以下属性隐藏第二种形式：

<form id=form1 on="submit-success:AMP.setState({form1Success: true})">...</form>
<form id=form2 hidden [hidden]="!form1Success">
   ...
</form>