Question

我有amp-form提交了POST的地址，还有2种不同类型的错误：{error: "precisionRequired"}和{error: "invalidZipcode"}。

如果用户的地址出错，我还有2 amp-lightbox个相应的文字和表格，所以我想根据我得到的错误打开正确的灯箱。

以下是我的代码：

<form method="POST" action-xhr="/epiceries"
  on="submit-success: AMP.navigateTo(url='/epiceries'); submit-error: precisionRequired.open">
  <input type="text" name="address">
  <button type="submit"> Submit </button>
</form>

<amp-lightbox id="invalidZipcode" layout="nodisplay">
  [... some form when the zipcode is not deliverable]
</amp-lightbox>

<amp-lightbox id="precisionRequired" layout="nodisplay">
  [... some content to ask the user to give us a complete address, not just a city :) ]
</amp-lightbox>

我知道我可以使用状态在一个灯箱中有条件地渲染我感兴趣的部分，如下所示：

<form method="POST" action-xhr="/epiceries"
  on="submit-success: AMP.navigateTo(url='/epiceries'); submit-error: AMP.setState({error: event.response.error}), lightbox.open">
  <input type="text" name="address">
  <button type="submit"> Submit </button>
</form>

<amp-lightbox id="lightbox>
  <div [class]="error == 'invalidZipcode' ? '' : 'hidden'">
    [... some form when the zipcode is not deliverable]
  </div>

  <div [class]="error == 'precisionRequired' ? '' : 'hidden'">
    [... some content to ask the user to give us a complete address, not just a city :) ]
  </div>
</amp-lightbox>

但它看起来像黑客，我希望有两个不同的灯箱，就像我的第一个片段一样。

是否可以根据服务器响应有条件地打开灯箱？如果有，怎么样？

Answer 1

您可以使用CSS实现自己的灯箱，并根据结果显示：

<div id="lightboxErrorZipcode" class="lightbox" 
     [hidden]="error !== 'invalidZipcode'" hidden>
    [... some form when the zipcode is not deliverable]
  <button on="tap:lightboxErrorZipcode.close">Close</button>
</div>
...

就个人而言，我会使用您所描述的有条件地渲染灯箱内容的方法（一个建议是使用我样本中的隐藏属性）。这样您就不需要在CSS中重新定义灯箱行为。

如何在提交错误上打开灯箱？

1 个答案: