0

我有一个多页表单，我只想在完成所有字段后才允许“下一步”按钮工作。我已按照以下链接进行操作；

放大器多页流

<div class="stepper vertical">
  <button class="step-title step-active"
    [class]="currentStep > 0 ? 'step-title' : 'step-title step-active'"
    on="tap:AMP.pushState({ currentStep: 0 })">
    <i class="step-incomplete"
      [class]="animalSelected ? 'step-complete' : 'step-incomplete'"
      data-step-nr="1"></i>
    Animal
  </button>
  <section [hidden]="currentStep > 0">
    <div class="content">
      <p>What's your favorite animal?</p>
      <amp-selector on="select:AMP.setState({animalSelected: true})"
        class="poll"
        name="animal-poll">
        <div option="cat">Cat</div>
        <div option="dog">Dog</div>
        <div option="horse">Horse</div>
      </amp-selector>
      <button disabled
        [disabled]="!animalSelected"
        on="tap:AMP.pushState({ currentStep: currentStep + 1 })">
        continue
      </button>
    </div>
  </section>
  <button class="step-title"
    [class]="currentStep != 1 ? 'step-title' : 'step-title step-active'"
    disabled
    [disabled]="!animalSelected"
    on="tap:AMP.pushState({ currentStep: 1 })">
    <i class="step-incomplete"
      [class]="colorSelected ? 'step-complete' : 'step-incomplete'"
      data-step-nr="2"></i>
    Color
  </button>
  <section hidden
    [hidden]="currentStep != 1">
    <div class="content">
      <p>What's your favorite color?</p>
      <amp-selector on="select:AMP.setState({colorSelected: true})"
        class="poll"
        name="color-poll">
        <div option="blue">Blue</div>
        <div option="green">Green</div>
        <div option="yellow">Yellow</div>
      </amp-selector>
      <button disabled
        [disabled]="!colorSelected"
        on="tap:AMP.pushState({ currentStep: currentStep + 1 })">
        continue
      </button>
    </div>
  </section>
  <button class="step-title"
    [class]="currentStep != 2 ? 'step-title' : 'step-title step-active'"
    disabled
    [disabled]="!colorSelected"
    on="tap:AMP.pushState({ currentStep: 2 })">
    <i class="step-incomplete"
      [class]="fruitSelected ? 'step-complete' : 'step-incomplete'"
      data-step-nr="3"></i>
    Fruit
  </button>
  <section hidden
    [hidden]="currentStep != 2">
    <div class="content">
      <p>What's your favorite fruit?</p>
      <amp-selector on="select:AMP.setState({fruitSelected: true})"
        class="poll"
        name="fruit-poll">
        <div option="apple">Apple</div>
        <div option="banana">Banana</div>
        <div option="cheery">Cheery</div>
      </amp-selector>
      <button disabled
        [disabled]="!fruitSelected"
        on="tap:AMP.pushState({ currentStep: currentStep + 1 })">
        continue
      </button>
    </div>
  </section>
</div>

这显示了我如何为单个单选按钮实现这一点，但是，我如何扩展它以适用于同一部分中的多个输入？

还有可能不是简单地禁用按钮，而是在单击按钮时提供某种反馈（即触发所需输入的错误弹出窗口）？

4

1 回答 1

0

您可以在绑定中使用表达式：

请参阅：https ://www.ampproject.org/docs/reference/components/amp-bind#expressions

类似的东西

[disabled] = "!select1 || !select2"

其中“select1”和“select2”来自各自的输入。

于 2019-02-21T05:32:07.950 回答