Angular: Making Button Toggle Group required for Material Stepper

Question

I'm relatively new to Angular and am just getting to grips with the Material Design Components and how they work and can interact with each other.

I'm building a multi-step web application, so it seemed logical to use the Material Stepper. The user will also be able to choose between various options on these steps, so I've used the Button Toggle Group to present these options.

What I'd like to be able to do - and am wondering if it is possible - is to make the Button Toggle Group a "required" field for the stepper. On some instances, the toggle group will be the only option on the step and I'd like to make it so that the user can't move onto the next step without selecting a Toggle Group option.

I've tried simple solutions like adding "required" onto the mat-button-toggle, like so:

<mat-button-toggle (click)="getOptionName(Oname);" class="btn btn-primary step-button" id="{{step1option.id}}" [ngClass]="status ? 'selected' : ''" required><span #Oname>{{step1option.text}}</span></mat-button-toggle>

And onto the mat-button-toggle-group:

<mat-button-toggle-group required>

But, unfortunately it's not that simple, which I didn't expect it to be. But hey, you might as well start with the most simple and obvious solution first, right?

Obviously, it didn't work and my knowledge of Angular isn't that extensive at the moment and trying various searches didn't turn up anything helpful (and/or anything I could understand).

Here's my code so far:

My component.html:

<mat-horizontal-stepper [linear]="isLinear" #stepper>
    <mat-step label="Step 1" [stepControl]="firstFormGroup">

        <form [formGroup]="firstFormGroup">

        <div ng-controller="step1">

            <h2>I'm thinking of...</h2>

            <mat-button-toggle-group>
              <div *ngFor="let step1option of step1options">
                <mat-button-toggle (click)="getOptionName(Oname);" class="btn btn-primary step-button" id="{{step1option.id}}" [ngClass]="status ? 'selected' : ''"><span #Oname>{{step1option.text}}</span></mat-button-toggle>
              </div>
              </mat-button-toggle-group>

            <div>You chose <strong>{{ selectedStep1Option }}!</strong></div>

            <button mat-stroked-button matStepperNext class="btn btn-secondary continue-btn">Continue</button>

         </div>

          </form>

        </mat-step>

        <mat-step label="Step 2" [stepControl]="secondFormGroup">
            <form [formGroup]="secondFormGroup">
              <p>Test</p>
            </form>
        </mat-step>

        <mat-step label="Step 3" [stepControl]="thirdFormGroup">
            <form [formGroup]="thirdFormGroup">
              <p>Test</p>
            </form>
        </mat-step>

</mat-horizontal-stepper>

And my component.ts:

import { Component, OnInit } from '@angular/core';
import { TimeoutError } from 'rxjs';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-customer-portal-step1',
  templateUrl: './customer-portal-step1.component.html',
  styleUrls: ['./customer-portal-step1.component.scss']
})

export class CustomerPortalStepOneComponent implements OnInit {

  isLinear = true;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  thirdFormGroup: FormGroup;

  constructor(private _formBuilder: FormBuilder) { }

  ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
      firstCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });
    this.thirdFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });
  }

  selectedStep1Option: string = 'nothing yet';

  step1options = [
    {
      text: 'Buying my first home',
      id: 'buying'
    },
    {
      text: 'Moving to a new home',
      id: 'moving'
    },
    {
      text: 'Remortgaging my home',
      id: 'remortgage'
    },
    {
      text: 'Purchasing a buy-to-let',
      id: 'purchase'
    }
  ];

  status: boolean = false;

  getOptionName (Oname: any) {
    this.selectedStep1Option = Oname.textContent;
    localStorage.setItem('I\'m thinking of:', JSON.stringify({ motivation: Oname.textContent }));
  }

}

I guess what I'm asking is, is this even possible, am I on the right track and, if not, what's the best approach for me to get the result I'm hoping for?

Any help you can offer would be appreciated.

Answer 1

You can use attribute disabled along with a dynamic expression to disable the matStepperNext, preventing the user from moving forward in the stepper. It looks like your default value is 'nothing yet'. You can disable the button for example by checking if the value is still the default/invalid 'nothing yet':

<mat-button-toggle-group>
  <div *ngFor="let step1option of step1options">
    <mat-button-toggle (click)="getOptionName(Oname);" class="btn btn-primary step-button" id="{{step1option.id}}" [ngClass]="status ? 'selected' : ''"><span #Oname>{{step1option.text}}</span></mat-button-toggle>
  </div>
</mat-button-toggle-group>

<div>You chose <strong>{{ selectedStep1Option }}!</strong></div>

<button mat-stroked-button matStepperNext class="btn btn-secondary continue-btn" [disabled]="selectedStep1Option === 'nothing yet'">Continue</button>

Here is an example in action showing disabling a button based on a mat-button-toggle-group value.

Hopefully that helps!