Executing Child Validators when moving to the next step in an Angular MatStepper from the Parent Component

I am looking to implement validation for my Mat-Stepper-Next function in the App Component using child component validators.

I have 3 different form components, each with its own form group, validations, and next button within the component.

I am including these child components in my parent component, where the Mat-Stepper is located.

Can you guide me on how to trigger the validations of the child components within the MatStepper Next function? The child components also have a Next button.

For example, if a form is incomplete or has errors, it should prevent transitioning to the next form.

Parent Component

----------------------------------------------
<mat-horizontal-stepper>
        <mat-step label="Form-1">
            <app-form1></app-form1>
        </mat-step>
        <mat-step label="Form-2">
            <app-form2></app-form2>
        </mat-step>
        <mat-step label="Form-3">
            <app-form3></app-form3>
        </mat-step>
</mat-horizontal-stepper>
javascriptangulartypescript

Answer №1

To prevent the next button from advancing if any field is invalid, you can utilize the completed property of mat stepper.

<mat-horizontal-stepper [linear]="true">
        <mat-step label="Form-1" [completed]="appForm1?.isCompleted ? true : false">
            <app-form1></app-form1>
        </mat-step>
        <mat-step label="Form-2" [completed]="appForm2?.isCompleted ? true : false">
            <app-form2></app-form2>
        </mat-step>
        <mat-step label="Form-3" [completed]="appForm3?.isCompleted ? true : false">
            <app-form3></app-form3>
        </mat-step>
</mat-horizontal-stepper>

In the parent.ts component, be sure to add references to the child components.

@ViewChild(AppForm1Component) public appForm1: AppForm1Component;
@ViewChild(AppForm2Component) public appForm2: AppForm2Component;
@ViewChild(AppForm3Component) public appForm3: AppForm3Component;

Within each component, you can create a get property called isCompleted to handle validation and checks for enabling the NEXT button. For example, in your AppForm1Component.ts:

get isCompleted(): boolean {
     return (this.form.valid && other checks)
}

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

Incorporate visual elements such as images that resemble checkboxes

I'm searching for an innovative approach to replace the traditional checkbox, incorporating images instead. My idea is to have users click on an image, which will then fade out and reveal a tick box overlay. My inspiration comes from Recaptcha 2, whe ...

javascriptjquerycsshtml

What is the best way to create a backup copy of my project using git?

To ensure the safety of my project, I took the necessary steps to back it up. First, I initialized a repository using git init Following that, I committed all files by executing git add . git commit -am "first commit" Now, the next step involves pushin ...

javascriptnode.jsgitgithubversion-control

The Issue of Horizontal Scrolling - None of the elements are out of

I am facing an issue with an unwanted horizontal scroll on my website and I can't seem to identify the cause. The header of my site is quite simple, utilizing display: flex, justify-content: center, marin-top: 5vh, along with some padding on the logo ...

javascripthtmlcss

The design of Foundation's 4 form dropdown is not displaying correctly on Internet Explorer versions 8 and below

During the development of a website using Foundation 4 framework, I encountered an issue with form dropdowns not displaying correctly on Internet Explorer 8 and older versions. Instead of using Foundation's javascript rendering, they appear as the def ...

javascriptjqueryformsdrop-down-menuzurb-foundation

PHP Implementing real-time dynamic categories

I am working on a project where there are multiple items listed with unique IDs. Each item has corresponding data with the same ID. I want to use JQuery, JScript, and PHP to display options based on the ID of the selected item in real-time. Below is a snip ...

javascriptphpjqueryhtmlcss

Dealing with intricate query parameters in Express.Js

Currently, I am working on developing REST APIs using Express.js. One particular express route that I have set up is as follows: /api/customer I have incorporated multiple query parameters into this route, such as: /api/customer?name=jake /api/customer?c ...

javascriptexpressroutes

I specialize in optimizing blog content by omitting the final line within a React framework

https://i.stack.imgur.com/WKOXT.png Currently, I have 4 lines and the 5th line in the current input field. This is my React code snippet: import { FC, useEffect, useState } from "react"; interface BlogWitterProps {} const BlogWitter: FC<B ...

javascriptcssreactjsreact-hooks

Alert: Circular dependency identified: Unable to determine the module

During the development of our project, we encountered an issue: fail: Microsoft.AspNetCore.SpaServices[0] WARNING in Circular dependency detected: fail: Microsoft.AspNetCore.SpaServices[0] src\app\app.module.ts -> src\m ...

angulartypescriptcircular-dependencyng-modules

An issue has been identified in the bubble sort algorithm causing certain numerical lists to not be properly sorted when implemented in NodeJS

I am just beginning to learn about algorithms and have started with the bubble sort. I wrote my own implementation and it seems to work well most of the time when sorting a list of numbers from 1 to 100. However, occasionally there is one random number th ...

javascriptnode.jsalgorithmsorting

Tally up the occurrences of each item in the array and provide the result in the form

Is there a built-in method in JavaScript to convert an array like: const colorArray = ['red', 'green', 'green', 'blue', 'purple', 'red', 'red', 'black']; into an object that c ...

javascriptarraysduplicatescategorical-datacategorization

Having trouble applying [formControl] to a set of radio buttons in Angular2

Currently, I am encountering an issue with a list of groups of radio buttons in Angular2. My objective is to bind the value of each group of radio buttons using [formControl]. However, when implementing this, the radio buttons seem to lose their normal mut ...

angularangular2-forms

Two primary router outlets featuring unique layouts

Design for all users Design for staff members (such as admin control panel) I am using a router-outlet with the first design. How can I switch to the second design at "/personnel"? I want to keep both designs intact since "personnel" has its own componen ...

angularroutesrouteroutlet

Applying CSS styles to a shadow DOM element will not produce the desired visual

I'm encountering an issue while attempting to apply CSS to an element within a shadow-root by adding a class to it. In my Angular component, I have the following code: CSS .test { border: 1px solid red; } TS document.getElementById('my-div&a ...

htmlcssangulartypescript

Programmatically adding route resolve in Angular using $routeProvider

Is it possible to dynamically add Angular's resolve after it has been initially defined in the app? Let's say we have a setup with routes like this: app.config(['$routeProvider', function ($routeProvider) { $routeProvider ...

javascriptangularjsangular-ui-router

What is the process for retrieving the result of a promise at a later time?

var screencastId = 'abc' var a = youtube.get(screencastId); a.then(function(screencast) { // Great, the screencast information is now available. console.log(screencast); }); // How can I access the `screencast` variable below? connection.be ...

javascriptpromisebluebird

Implementing MVC architecture in web development allows for the encryption of parameters sent

I have a scenario where I'm utilizing an ajax call to trigger my action method. The call involves sending two parameters, and I aim to secure/ encrypt these parameters before transmitting them to the action method, then decrypting those values within ...

javascriptjqueryajaxasp.net-mvcencryption

Retrieving outcome of Solidity contract function using web3-1.0.0-beta.27

I am using web3 1.0.0-beta.27 and the pragma solidity is set to ^0.4.2. contract Charity{ function ping() public constant returns (uint) { return 200; } } Currently, I am compiling and calling it in typescript with: import * as fs ...

javascriptethereumsmartcontractsweb3js

Trigger Bootstrap Modal using ASP Razor code within MVC Model value execution

I have a web application built with ASP .NET Core and MVC. The app features a side menu that allows the user to navigate through different pages based on their workflow. For example, when a user logs in for the first time, they are directed to the Home pag ...

javascriptasp.net-coreasp.net-core-mvcbootstrap-5

Displaying URLs stylishly with Pills Bootstrap

When a pill is selected from the list, I need to display a specific URL that can be used elsewhere. However, there is an href="#pills-something" attribute that directs to an ID below. I am looking for something like: mysite.com/myspecificpill or ...

javascripthtmljquerycssbootstrap-4

You are unable to declare an Angular component as an abstract class within a module

In my coding project, there is a fundamental component class known as BaseComponent with its unique markup referred to as <base-component-fun>. The structure of this component's markup looks like this: <div> ..Base markup </div> Thi ...

angularangular-components