Customizing Angular Material Stepper Configuration

My goal is to set up my stepper using Angular Material in a specific way:

When I select a step, the status should switch between validated and not validated. Additionally, only the next step should be clickable after this change.

Therefore, until the current step is validated, I should not be able to click on the subsequent step.

I am unsure about how to achieve this and would appreciate some guidance.

I have come across examples like validators.required but I am uncertain on how to customize it as per my requirements.

Thank you for your help.

angulartypescriptstepper

Answer №1

When creating a form with multiple steps, consider using stepControl for the top level abstract control of each step and linear to determine whether to check the validity of previous steps. You may choose to assign each step its own formControl containing validators and fields to ensure that the form is valid before allowing the user to proceed.

@Input()
stepControl: AbstractControlLike

For example:

<h1>Thing {{ id }}</h1>
<mat-horizontal-stepper #stepper [selectedIndex]="selectedIndex" labelPosition="bottom" linear="true">
  <mat-step label="One" [stepControl]="oneForm">
    <my-one #one></my-one>
  </mat-step>
  <mat-step label="Two" [stepControl]="twoForm">
    <my-two #two></my-two>
  </mat-step>
  <mat-step label="Three" [stepControl]="threeForm">
    <my-three #three></my-three>
  </mat-step>
</mat-horizontal-stepper>

Check out this working example: https://stackblitz.com/edit/stepper-validate-form-ewtpka?file=src%2Findex.html,src%2Fapp%2Fparent%2Fparent.component.html

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize SWR in NextJS to efficiently manage API redirection duplication

When using SWR to fetch data, I encountered an error where the default path of nextjs was repeated: http://localhost:3000/127.0.0.1:8000/api/posts/get-five-post-popular?skip=0&limit=5 Here is my tsx code: 'use client' import useSWR from &quo ...

typescriptnext.js

Utilizing a personalized (branched) @types package

I have taken the @types/stripe package from the DefinitelyTyped repository on GitHub and created my own version in my personal GitHub repo / npm module. I understand that this custom type module may not work automatically. I attempted to integrate it by ...

typescript

Enhance your Typescript code by incorporating typing for response objects that include both index signatures and key-value pairs

I am grappling with how to properly incorporate typescript typings for the response object received from a backend service: { de49e137f2423457985ec6794536cd3c: { productId: 'de49e137f2423457985ec6794536cd3c', title: 'ite ...

typescriptobjecttypeskey-pairindex-signature

Struggling to accurately convert the string into a date object

I have an array of objects structured like this: const days = [ { _id: 12312323, date : '30/12/2021', dateStatus : 'presence' }, ... ] I am looking to convert the date property from a string to a Date object using the follo ...

javascripttypescript

Exploring Angular's powerful routing feature: lazy loading modules with loadChildren

I am developing an Ionic app that includes tabs and a login page. The tabs are structured in their own module with a routing module for each tab. Upon launching the app, I want users to be directed to the login page first. After successfully logging in, ...

angularionic4

Angular - Using HttpClient for handling POST requests

The example provided in the official Angular HttpClient documentation demonstrates how to make a POST request to a backend server. /** POST: add a new hero to the database */ addHero (hero: Hero): Observable<Hero> { return this.http.post<Hero&g ...

angulartypescripthttppost

Issue with Angualr2: Trying to assign a value to a property of #<AbstractControl> that is read-only

The form structure is as follows: <form [ngFormModel]="myForm" (ngSubmit)="update()"> <ion-label floating>First Name</ion-label> <ion-input type="text" id="fname" [ngFormControl]="fname"> & ...

angular

There seems to be a mismatch in compatibility between the register() function in react-hook-form and the native input types

Currently, I'm in the midst of a React project that utilizes TypeScript along with react-hook-form. At one point in my code, I am making use of the provided function register(), which should be implemented as follows according to the official document ...

javascriptreactjstypescriptreact-hook-form

How should one effectively manage the use of dynamic `.apply()` in TypeScript?

Exploring a particular code snippet, it defines an object with three methods, each requiring a different number of arguments. The code then dynamically calls one of these methods based on a variable's value using the apply() method along with an args ...

typescripttypescript-typings

Unselect all options in Angular's multiple selection feature

Objective: My goal is to ensure that when I invoke the myMethod() function, all options are unselected. Current Issue: Currently, calling myMethod() will only deselect the last option, leaving the others selected if they were previously selected. Possibl ...

htmlangulartypescript

Executing a Javascript function through Typescript in an Ionic application

I integrated a plugin into my ionic project, which includes both Java and JS code: cordova.define("cordova-sms-plugin.Sms", function(require, exports, module) { 'use strict'; var exec = require('cordova/exec'); var sms = {}; functio ...

javascriptjavatypescriptcordovaionic-framework

Disappearing Data Mystery in ngFor Array

In my Angular 6 component, I have created a form for adding new users using an HTML table: user-add.component.html [...] <tbody> <tr *ngFor="let value of data.pos; let i = index"> <td><input matInput [(ngModel)]="value.us ...

javascriptangularhtml-tablengfor

Sending data from view to controller in Angular using TypeScript

I am currently working with AngularJS and TypeScript, and I have encountered an issue with passing a parameter from the view to the controller. In my attempts to solve this problem, I have utilized ng-init as follows: <div class="col-md-9" ng-controlle ...

angularjsangularjs-scopetypescript

What is the method to incorporate type hints for my unique global Vue directives?

When I import or create a directive in an SFC file, I can receive TypeScript hints like this: import vFocus from 'my-custom-component-library'; View demo with ts hints However, if I globally register it in main.ts, the type hints are not availa ...

typescriptvue.jsvolar

Guide on creating and deploying an iOS API file onto a physical device with a Mac computer

I recently switched to using a Mac and have installed Xcode successfully, along with adding the platform for iOS. However, when I use adb devices, my iPhone device is not detected, but my Android device is recognized when connected. Additionally, when ru ...

iosiphonexcodeangularionic2

Personalized design for Angular's Material Table (mat-table) in version 2

One way to use the mat-table is by following this element structure: <mat-table> <mat-header-row>...</mat-header-row> <mat-row>...</mat-row> ... <mat-row>...</mat-row> </mat-table> However, if you ...

angularangular-material

The Angular2 authentication guard utilizes observables to monitor and manage the current user's status

As a newcomer to Angular, I am currently working on implementing an auth guard in my application. While I understand that I can continuously check my server for session information about the logged-in user, I am interested in maintaining this information t ...

angularauthenticationangular2-services

Managing nested request bodies in NestJS for POST operations

A client submits the following data to a REST endpoint: { "name":"Harry potter", "address":{ "street":"ABC Street", "pincode":"123", "geo":{ &q ...

node.jstypescriptnestjs

AngularJS: Utilizing services to make API requests and retrieve JSON data

I am struggling to pass a value from an input field on the view using a service. The service is supposed to call my WebAPI2 and then receive a valid JSON as a response. Unfortunately, I keep getting a promise object that I cannot resolve (even with ".then ...

javascripthtmlangularjsjsontypescript

Using Angular 2 to create an Observable type that mediates two separate http.get calls

In my ng2 service, I have a method that contains two http.get calls. Here is an example of the function: getInfo(userId: number): any { this.http .get(apiUrl, options) .map(response => response.json()) .subscribe(example => ...

javascriptangulartypescript