amp multi page form button disabled until selected fields are completed

Question

I have a multi-page form where by I want to only allow the 'next' button to work once all fields are completed. I have followed the following link;

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>

Which shows how I can achieve this for a single radio button, however, how can I extend this to work for multiple inputs in the same section?

Also is it possible instead of simply disabling the button, that when the button is clicked give some kind of feedback (i.e. trigger the error popups for the required inputs)?

Answer 1

You can use expressions in your binding:

See: https://www.ampproject.org/docs/reference/components/amp-bind#expressions

Something along the line of

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

where "select1" and "select2" are from respective inputs.