Amp html 在AMP上提交时如何更改输入提交文本值？

我有一个简单的amp表单，我想在表单提交时更改输入提交的文本：

<form method="POST" class="p2" action-xhr=".../api/contacts" custom- 
  validation-reporting="as-you-go" target="_top">
 <input name="phone" id="phone_input" required>

 //Change the value from Submit to Submitting... when the user clicks
 <input id="btn-form-submit" type="submit" value="Submit">
  <div id="submit-success" submit-success>
    <template type="amp-mustache">
       <h6>Success!</h6>
    </template>
  </div>
</form>

#btn-form-submit:before {
    content: "Submit";
}

form.amp-form-submitting #btn-form-submit:before {
    content: "Submitting";
}

//将值从提交更改为提交。。。当用户单击
成功！

---

有可能吗？

想到两个选项：

使用按钮的

值并将其绑定到某个状态。

添加一些启动状态：

<amp-state id="formText">
  <script type="application/json">
    {
      "submit": "Submit"
    }
  </script>
</amp-state>

最后，在表单的
submit
事件上调用
AMP.setState
以更改状态，这将导致更改绑定属性（您可能还希望使用
submit success
和
submit error
事件将其恢复为“提交”）：

现在使用提供基本案例（“提交”）和提交时的按钮文本：

<form method="POST" class="p2" action-xhr=".../api/contacts" custom- 
  validation-reporting="as-you-go" target="_top">
 <input name="phone" id="phone_input" required>

 //Change the value from Submit to Submitting... when the user clicks
 <input id="btn-form-submit" type="submit" value="Submit">
  <div id="submit-success" submit-success>
    <template type="amp-mustache">
       <h6>Success!</h6>
    </template>
  </div>
</form>

#btn-form-submit:before {
    content: "Submit";
}

form.amp-form-submitting #btn-form-submit:before {
    content: "Submitting";
}

#btn-form-submit:before {
    content: "Submit";
}

form.amp-form-submitting #btn-form-submit:before {
    content: "Submitting";
}