AMP表单amp-mustache未提交时点击添加学生提前显示成功提示

你遇到的两个异常都是AMP属性绑定和表单响应逻辑错误导致的：

• 提前显示提交成功消息：动态字段的[required]初始值、按钮触发的状态赋值逻辑写反，且提交成功/失败的提示区块没有加显隐控制，AMP在表单字段校验状态变更时误触发了成功模板渲染。
• 新增学生字段必填校验不生效：你给[required]传的是字符串'true'/空字符串，AMP布尔属性绑定只识别原生布尔值true/false，字符串会导致校验规则失效。

1. 初始化AMP状态时，把两个动态学生区块的必填状态默认设为false
2. 修正添加/移除学生按钮的setState逻辑：点击添加时将对应区块的required状态设为布尔值true，点击移除时设为false
3. 给提交成功、提交失败的提示块加[hidden]绑定，默认保持隐藏，仅在表单提交触发对应事件时才显示，避免误渲染
4. 补全AMP表单、模板组件依赖，给<form>标签补全AMP要求的标准属性，确保表单提交行为正常

<!-- 补全缺失的AMP组件依赖 -->
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

<!-- 初始化表单状态 -->
<amp-state id="formState">
  <script type="application/json">
    {
      "student2Required": false,
      "student3Required": false,
      "showSuccess": false,
      "showError": false
    }
  </script>
</amp-state>

<!-- 表单本体，替换成实际的提交接口地址 -->
<form method="post" action-xhr="/your-submit-api" target="_top"
  on="submit-success:AMP.setState({showSuccess: true, showError: false});
      submit-error:AMP.setState({showError: true, showSuccess: false});">

  <!-- 第一个学生固定必填字段 -->
  <div class="form-group">
    <label for="student1Name" class="label-forms">学生1姓名: *</label>
    <input id="student1Name" name="student1Name" type="text" required>
  </div>
  <br/>

  <!-- 第二个学生区块 -->
  <button id="removeStudent2" class="button" hidden on="tap:student2Block.show,removeStudent2.hide,addStudent2.show, AMP.setState({formState: {student2Required: true}})">添加第二名学生信息...</button>
  <button id="addStudent2" class="button" on="tap:student2Block.hide,addStudent2.hide,removeStudent2.show, AMP.setState({formState: {student2Required: false}})">移除第二名学生信息...</button>

  <div id="student2Block" hidden>                                            
    <input name="student2Name" type="text" [required]="formState.student2Required">                       
    <div id="div-edu2" class="form-group">
      <label class="label-forms">学生2学历: *</label>
      <select name="student2Edu" class="input-default" [required]="formState.student2Required">
          <option value="">请选择</option>
          <option value="1">A</option>
          <option value="2">B</option>
          <option value="3">C</option>
          <option value="4">D</option>
      </select>
    </div>

    <!-- 第三个学生区块，仅添加第二个学生后可见，符合最多加2名额外学生的需求 -->
    <button id="removeStudent3" class="button" hidden on="tap:student3Block.show,removeStudent3.hide,addStudent3.show, AMP.setState({formState: {student3Required: true}})">添加第三名学生信息...</button> 
    <button id="addStudent3" class="button" on="tap:student3Block.hide,addStudent3.hide,removeStudent3.show, AMP.setState({formState: {student3Required: false}})">移除第三名学生信息...</button>

    <div id="student3Block" hidden>
      <input name="student3Name" type="text" [required]="formState.student3Required">
      <div id="div-edu3" class="form-group">
          <label class="label-forms" for="student3Edu">学生3学历: *</label>
          <select id="student3Edu" name="student3Edu" class="input-default" [required]="formState.student3Required">
              <option value="">请选择</option>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
              <option value="3">Option 3</option>
              <option value="4">Option 4</option>
          </select>
      </div>
    </div>
  </div>

  <div class="col-10 mx-auto">
    <input type="submit" value="提交报名">
  </div>

  <!-- 提交提示块默认隐藏，仅对应事件触发后显示 -->
  <div submit-success [hidden]="!formState.showSuccess" hidden>
    <template type="amp-mustache">
        <p class="text-center">报名提交成功！</p>
    </template>
  </div>

  <div submit-error [hidden]="!formState.showError" hidden>
    <template type="amp-mustache">
        <p class="text-center">提交失败，请稍后重试。</p>
    </template>
  </div>
</form>

• 所有select下拉框的默认选项要加空值value=""，否则AMP会默认选中第一个选项，导致必填校验直接通过，不符合预期
• 原代码中添加/移除按钮的显示逻辑和文字是反的，修复后已经对齐操作逻辑
• 动态添加的字段设置required为false时，即使字段为空也不会阻塞主表单提交，符合移除学生后无需填写对应信息的逻辑

内容的提问来源于stack exchange，提问作者gdluc