Кнопка многостраничной формы amp отключена, пока не будут заполнены выбранные поля

Question

У меня есть многостраничная форма, где я хочу, чтобы кнопка "Далее" работала только после заполнения всех полей. Я перешел по следующей ссылке;

Amp Multipage Flow

<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>

Что показывает, как я могу добиться этого для одной радиокнопки, однако, как я могу расширить это для работы с несколькими входами в одном разделе?

Кроме того, возможно ли вместо простого отключения кнопки, чтобы при нажатии кнопки была какая-то обратная связь (т. Е. Вызывать всплывающие сообщения об ошибках для требуемых входов)?

Answer 1

Вы можете использовать выражения в вашей привязке:

Смотрите: https://www.ampproject.org/docs/reference/components/amp-bind

Что-то по линии

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

где "select1" и "select2" относятся к соответствующим входам.