Mat-Stepper - How to use the Linear Mode?

[Partha Majumdar]

Dear Sir/Madam,

I have defined a set of steps. Now, my program is working perfectly after a few days of struggle.

However, I have set Linear Mode === false. 

The issue is that now the user can click to any of the steps and this may result in them seeing wrong set of data as the step may be from a previous working of the steps or may not have been executed as we are in some earlier stage.

I tried to make Linear Mode === TRUE. However, after doing then, when I click on the NEXT button, the stepper does not move to the next stage.

I want my users to moves as per the defined steps and no jump between steps.

What do I need doing for this?

Thanks in advance.

Regards,

Partha

[Riccardo Sadocchi]

It depends on the action that the user has to do in each step, if you have a form to jump in next step the form must be valid

[Partha Majumdar]

Thanks Mr. Sadocchi.

I find that my form (both the current page and the net page are valid). However, it does not step to the next form.

I was using the example given in the material web site. Even in that example, I find that in Linear mode, the Stepper does not step to the next stage.

Please advice.

Regards,

Partha

[Riccardo Sadocchi]

Can you post the mat-stepper and form code?

Il giorno venerdì 5 ottobre 2018 18:05:36 UTC+2, Partha Majumdar ha scritto:

[Partha Majumdar]

Thanks for your kind attention, Mr. Sadocchi.

Please find below the complete HTML File content.

I am actually not sure about this code in the .ts file

ngOnInit() {

this.uploadForm = new FormGroup({

'fileContents': new FormControl(null, {validators: [Validators.required]})

});

this.dataFieldNames = this.dataService.getDataFieldNames();

this.loadExistingData();

this.errorData.paginator = this.errorPaginator;

this.uploadData.paginator = this.uploadPaginator;

this.toUploadData.paginator = this.toUploadPaginator;

this.uploadResult.paginator = this.uploadResultPaginator;

this.firstFormGroup = this._formBuilder.group({

firstCtrl: ['', Validators.nullValidator]

});

this.secondFormGroup = this._formBuilder.group({

secondCtrl: ['', Validators.nullValidator]

});

this.thirdFormGroup = this._formBuilder.group({

thirdCtrl: ['', Validators.nullValidator]

});

this.threeAFormGroup = this._formBuilder.group({

threeACtrl: ['', Validators.nullValidator]

});

this.fourthFormGroup = this._formBuilder.group({

fourthCtrl: ['', Validators.nullValidator]

});

this.fifthFormGroup = this._formBuilder.group({

fifthCtrl: ['', Validators.nullValidator]

});

}

Thanks in advance.

Regards,

Partha

<table width="100%">

<tr>

<td>

<app-country-header></app-country-header>

</td>

</tr>

<tr>

<td>

<!-- <button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">

{{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}

</button> -->

<mat-horizontal-stepper [linear]="isLinear" #stepper>

<mat-step [stepControl]="firstFormGroup">

<form [formGroup]="firstFormGroup">

<ng-template matStepLabel>Specify File to Upload</ng-template>

<div>

<button type="button" mat-stroked-button matStepperNext *ngIf="fileName && fileName !== ''">Next</button>

</div>

<mat-card>

<p>Specify File to Upload</p>

<table width="100%">

<tr>

<td>

<mat-form-field hintLabel="Max 2 characters">

<input matInput #fldFieldSeparator value="," placeholder="Field Separator" type="text" minlength="1" maxlength="2">

</mat-form-field>

</td>

<td>

<mat-form-field hintLabel="Max 5 characters">

<input matInput #fldRecordSeparator value='\r\n' disabled placeholder="Record Separator" type="text" minlength="2" maxlength="5">

</mat-form-field>

</td>

<td>

<mat-form-field hintLabel="Max 3 characters">

<input matInput #fldQuoteCharacter value="'" placeholder="Quote Character" type="text" maxlength="3">

</mat-form-field>

</td>

</tr>

</table>

<table width="100%">

<tr>

<td width="30%">

<button mat-stroked-button type="button" (click)="filePicker.click()">Click here to choose the File</button>

<input type="file" accept="text/plain" #filePicker (change)="onFilePicked($event, fldFieldSeparator, fldRecordSeparator, fldQuoteCharacter)">

</td>

<td width="70%">

<mat-form-field>

<input matInput placeholder="File Name" type="text" readonly [value]="fileName">

</mat-form-field>

</td>

</tr>

</table>

</mat-card>

</form>

</mat-step>

<mat-step [stepControl]="secondFormGroup">

<form [formGroup]="secondFormGroup">

<ng-template matStepLabel>Validating File</ng-template>

<div>

<button type="button" mat-stroked-button matStepperPrevious>Back</button>

<button type="button" mat-stroked-button matStepperNext *ngIf="dataIsValid">Next</button>

<button type="button" mat-stroked-button (click)="initiailise(); filePicker.value=''; loadExistingData(); stepper.reset()">Reset</button>

</div>

<mat-card>

<p>Expected Header</p>

<table border = 1 width="100%">

<thead>

<tr>

<th *ngFor="let colName of dataFieldNames">{{colName.name}}</th>

</tr>

</thead>

</table>

</mat-card>

<mat-card *ngIf="filePreview && filePreview !== '' && hasData">

<mat-card-title align="center">Uploaded File Details</mat-card-title>

<form [formGroup]="uploadForm" width="100%">

<textarea matInput align="left" placeholder="Raw File Contents" formControlName="fileContents" [value]="filePreview" type="text" rows="10" cols="120" readonly></textarea>

<mat-hint align="end">Raw File Contents</mat-hint>

</form>

<p>Obtained Header</p>

<table border = 1 width="100%">

<thead>

<tr>

<th *ngFor="let colName of obtainedFieldNames">{{colName.name}}</th>

</tr>

</thead>

</table>

</mat-card>

<mat-card>

<table border=0 width="100%">

<tr width="100%">

<td align="center" width="100%">

<button mat-flat-button color="warn" type="submit" (click)="dummyFunction()" *ngIf="!hasData">Empty File provided. Cannot proceed.</button>

<br *ngIf="!hasData">

<button mat-flat-button color="warn" type="submit" (click)="dummyFunction()" *ngIf="!columnNamesMatch">Column Names do not match. Cannot Upload this data.</button>

<br *ngIf="!columnNamesMatch">

<button mat-flat-button color="warn" type="submit" (click)="dummyFunction()" *ngIf="invalidColumnName">Invalid Column Names in Uploaded File. Cannot Upload this data.</button>

<br *ngIf="invalidColumnName">

<button mat-flat-button color="warn" type="submit" (click)="dummyFunction()" *ngIf="invalidInputConditions">Invalid Input Conditions. Cannot Upload this data.</button>

<br *ngIf="invalidInputConditions">

<button mat-flat-button color="accent" type="reset" (click)="dummyFunction()" *ngIf="dataIsValid">Valid Data. Can Upload this data.</button>

</td>

</tr>

</table>

</mat-card>

</form>

</mat-step>

<mat-step [stepControl]="threeAFormGroup">

<form [formGroup]="threeAFormGroup">

<ng-template matStepLabel>Error Records</ng-template>

<div>

<button type="button" mat-stroked-button matStepperPrevious>Back</button>

<button type="button" mat-stroked-button matStepperNext>Next</button>

<button type="button" mat-stroked-button (click)="initiailise(); filePicker.value=''; loadExistingData(); stepper.reset()">Reset</button>

</div>

<mat-card *ngIf="dataIsValid">

<mat-card-title align="center">Error Records</mat-card-title>

<mat-card>

<table>

<tr>

<td width="33%" align="center" word-wrap="false">Total Records</td>

<td width="33%" align="center" word-wrap="false">Error Records</td>

<td width="33%" align="center" word-wrap="false">Blank Rows</td>

</tr>

<tr>

<td width="33%" align="center" word-wrap="false"><p class="Success">{{ totalRecords }}</p></td>

<td width="33%" align="center" word-wrap="false"><p class="Failed">{{ numberErrorRecords }}</p></td>

<td width="33%" align="center" word-wrap="false"><p class="Failed">{{ blankRows }}</p></td>

</tr>

</table>

</mat-card>

<div class="mat-elevation-z8">

<table id="ErrorRecords" mat-table [dataSource]="errorData" class="mat-elevation-z8" width="100%">

<!--- Note that these columns can be defined in any order.

The actual rendered columns are set as a property on the row definition" -->

<!-- Currency Code Column -->

<ng-container matColumnDef="text">

<th mat-header-cell *matHeaderCellDef> Error Record: Records having invalid number of fields </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.text}} </td>

</ng-container>

<tr mat-header-row *matHeaderRowDef="errorDisplayedColumns"></tr>

<tr mat-row *matRowDef="let row; columns: errorDisplayedColumns;"></tr>

</table>

<mat-paginator #errorPaginator [pageSizeOptions]="[10, 15, 20]" showFirstLastButtons></mat-paginator>

</div>

</mat-card>

</form>

</mat-step>

<mat-step [stepControl]="thirdFormGroup">

<form [formGroup]="thirdFormGroup">

<ng-template matStepLabel>Data Preview</ng-template>

<div>

<button type="button" mat-stroked-button matStepperPrevious>Back</button>

<button type="button" mat-stroked-button matStepperNext *ngIf="modifiedDataAvailable">Next</button>

<button type="button" mat-stroked-button (click)="initiailise(); filePicker.value=''; loadExistingData(); stepper.reset()">Reset</button>

</div>

<mat-card *ngIf="dataIsValid">

<mat-card-title align="center">Data to Upload</mat-card-title>

<mat-card>

<table>

<tr>

<td width="33%" align="center" word-wrap="false">Valid Records</td>

<td width="33%" align="center" word-wrap="false">Invalid Records</td>

<td width="33%" align="center" word-wrap="false">Records to Modify</td>

</tr>

<tr>

<td width="33%" align="center" word-wrap="false"><p class="Success">{{ totalRecords - numberErrorRecords - numberOfInvalidRecords }}</p></td>

<td width="33%" align="center" word-wrap="false"><p class="Failed">{{ numberOfInvalidRecords }}</p></td>

<td width="33%" align="center" word-wrap="false">{{ numberOfModifiedRecords }}</td>

</tr>

</table>

</mat-card>

<div class="mat-elevation-z8">

<!-- <table id="DataPreview" mat-table [dataSource]="uploadData" class="mat-elevation-z8" width="100%"> -->

<table id="DataPreview" mat-table [dataSource]="uploadData" multiTemplateDataRows class="mat-elevation-z8" width="100%">

<!--- Note that these columns can be defined in any order.

The actual rendered columns are set as a property on the row definition" -->

<!-- <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">

<th mat-header-cell *matHeaderCellDef> {{column}} </th>

<td mat-cell *matCellDef="let element"> {{element[column]}} </td>

</ng-container> -->

<!-- Country Code Column -->

<ng-container matColumnDef="countryCode">

<th mat-header-cell *matHeaderCellDef> Country Code </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.dataRecord.countryCode}} </td>

</ng-container>

<!-- Country Name Column -->

<ng-container matColumnDef="countryName">

<th mat-header-cell *matHeaderCellDef> Name </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.dataRecord.countryName}} </td>

</ng-container>

<!-- ISO Alpha3 Code Column -->

<ng-container matColumnDef="ISOAlpha3Code">

<th mat-header-cell *matHeaderCellDef> ISO Alpha 3 Code </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.dataRecord.ISOAlpha3Code}} </td>

</ng-container>

<!-- ISO Alpha2 Code Column -->

<ng-container matColumnDef="ISOAlpha2Code">

<th mat-header-cell *matHeaderCellDef> ISO Alpha 2 Code </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.dataRecord.ISOAlpha2Code}} </td>

</ng-container>

<!-- ISO Numeric Code Column -->

<ng-container matColumnDef="ISONumericCode">

<th mat-header-cell *matHeaderCellDef> ISO Numeric Code </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.dataRecord.ISONumericCode}} </td>

</ng-container>

<!-- Currency Code Column -->

<ng-container matColumnDef="currencyCode">

<th mat-header-cell *matHeaderCellDef> Currency Code </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.dataRecord.currencyCode}} </td>

</ng-container>

<!-- Record Status Column -->

<ng-container matColumnDef="recordStatus">

<th mat-header-cell *matHeaderCellDef> Record Status </th>

<td mat-cell *matCellDef="let row">

<button mat-button color="primary" *ngIf="row.recordStatus === I_NEW_RECORD_INDICATOR"><mat-icon>add_circle</mat-icon></button>

<button mat-button color="primary" *ngIf="row.recordStatus === I_MODIFIED_RECORD_INDICATOR"><mat-icon>create</mat-icon></button>

<button mat-button color="warn" *ngIf="row.recordStatus === I_INVALID_RECORD_INDICATOR"><mat-icon>clear</mat-icon></button>

<button mat-button color="basic" *ngIf="row.recordStatus === I_UNCHANGED_RECORD"><mat-icon>cloud_off</mat-icon></button>

</td>

</ng-container>

<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->

<ng-container matColumnDef="expandedDetail">

<td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">

<div class="example-element-detail"

[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'" *ngIf="element.recordStatus === I_INVALID_RECORD_INDICATOR">

<table width="100%">

<tr>

<td align="left">Original Record: <b>{{element.record}}</b></td>

</tr>

<tr>

<td><p class="FailedMessage">Error: <b>{{element.recordError}}</b></p></td>

</tr>

</table>

</div>

</td>

</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

<tr mat-row *matRowDef="let row; columns: displayedColumns;"

class="example-element-row"

[class.example-expanded-row]="expandedElement === row"

(click)="expandedElement = row"

>

</tr>

<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>

</table>

<mat-paginator #uploadPaginator [pageSizeOptions]="[10, 15, 20]" showFirstLastButtons></mat-paginator>

</div>

<!--

<table border = 1 width="100%">

<thead>

<tr>

<th *ngFor="let colName of displayFieldNames">{{colName.name}}</th>

</tr>

</thead>

<tbody>

<tr *ngFor="let row of records">

<td *ngFor="let column of row">{{column}}</td>

</tr>

</tbody>

</table> -->

</mat-card>

</form>

</mat-step>

<mat-step [stepControl]="fourthFormGroup">

<form [formGroup]="fourthFormGroup">

<ng-template matStepLabel>Upload Preview</ng-template>

<div>

<button type="button" mat-stroked-button matStepperPrevious>Back</button>

<button type="button" mat-stroked-button matStepperNext (click)="onUpload()">Upload and Continue</button>

<button type="button" mat-stroked-button (click)="initiailise(); filePicker.value=''; loadExistingData(); stepper.reset()">Reset</button>

</div>

<mat-card *ngIf="dataIsValid">

<mat-card-title align="center">Modified Data</mat-card-title>

<mat-card>

<table>

<tr>

<td width="50%" align="center" word-wrap="false">Records to Add: {{ numberOfRecordsToAdd }}</td>

<td width="50%" align="center" word-wrap="false">Records to Update: {{ numberOfRecordsToUpdate }}</td>

</tr>

</table>

</mat-card>

<div class="mat-elevation-z8">

<table id="uploadPreview" mat-table [dataSource]="toUploadData" class="mat-elevation-z8" width="100%">

<!--- Note that these columns can be defined in any order.

The actual rendered columns are set as a property on the row definition" -->

<!-- Country Code Column -->

<ng-container matColumnDef="countryCode">

<th mat-header-cell *matHeaderCellDef> Country Code </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.dataRecord.countryCode}} </td>

</ng-container>

<!-- Country Name Column -->

<ng-container matColumnDef="countryName">

<th mat-header-cell *matHeaderCellDef> Name </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.dataRecord.countryName}} </td>

</ng-container>

<!-- ISO Alpha3 Code Column -->

<ng-container matColumnDef="ISOAlpha3Code">

<th mat-header-cell *matHeaderCellDef> ISO Alpha3 Code </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.dataRecord.ISOAlpha3Code}} </td>

</ng-container>

<!-- ISO Alpha2 Code Column -->

<ng-container matColumnDef="ISOAlpha2Code">

<th mat-header-cell *matHeaderCellDef> ISO Alpha2 Code </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.dataRecord.ISOAlpha2Code}} </td>

</ng-container>

<!-- ISO Numeric Code Column -->

<ng-container matColumnDef="ISONumericCode">

<th mat-header-cell *matHeaderCellDef> ISO Numeric Code </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.dataRecord.ISONumericCode}} </td>

</ng-container>

<!-- Currency Code Column -->

<ng-container matColumnDef="currencyCode">

<th mat-header-cell *matHeaderCellDef> Currency Code </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.dataRecord.currencyCode}} </td>

</ng-container>

<!-- Record Status Column -->

<ng-container matColumnDef="recordStatus">

<th mat-header-cell *matHeaderCellDef> Record Status </th>

<td mat-cell *matCellDef="let row">

<button mat-button color="primary" *ngIf="row.recordStatus === I_NEW_RECORD_INDICATOR"><mat-icon>add_circle</mat-icon></button>

<button mat-button color="primary" *ngIf="row.recordStatus === I_MODIFIED_RECORD_INDICATOR"><mat-icon>create</mat-icon></button>

<button mat-button color="warn" *ngIf="row.recordStatus === I_INVALID_RECORD_INDICATOR"><mat-icon>clear</mat-icon></button>

<button mat-button color="basic" *ngIf="row.recordStatus === I_UNCHANGED_RECORD"><mat-icon>cloud_off</mat-icon></button>

</td>

</ng-container>

<!-- Update Status Column -->

<ng-container matColumnDef="updateStatus">

<th mat-header-cell *matHeaderCellDef> Update Status </th>

<td mat-cell *matCellDef="let row">

<button mat-button *ngIf="row.updateStatus === I_UPDATE_STATUS_SUCCESSFUL"><mat-icon>mood</mat-icon></button>

<button mat-button color="warn" *ngIf="row.updateStatus === I_UPDATE_STATUS_FAILED"><mat-icon>error</mat-icon></button>

<button mat-button *ngIf="row.updateStatus === I_YET_TO_UPDATE"><mat-icon>notifications_active</mat-icon></button>

<button mat-button *ngIf="row.updateStatus === I_NO_ACTION"><mat-icon>notifications_none</mat-icon></button>

</td>

</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

<mat-paginator #toUploadPaginator [pageSizeOptions]="[10, 15, 20]" showFirstLastButtons></mat-paginator>

</div>

</mat-card>

</form>

</mat-step>

<mat-step [stepControl]="fifthFormGroup">

<form [formGroup]="fifthFormGroup">

<ng-template matStepLabel>Upload Status</ng-template>

<div *ngIf="uploadComplete">

<button type="button" mat-stroked-button (click)="initiailise(); filePicker.value=''; loadExistingData(); stepper.reset()">Reset</button>

</div>

<mat-card *ngIf="dataIsValid">

<mat-card-title align="center">Upload Status</mat-card-title>

<mat-card>

<table>

<tr>

<td width="50%" align="center" word-wrap="false"><p class="Success">Successful: {{ numberSuccessful }} / {{ toUploadData.data.length }}</p></td>

<td width="50%" align="center" word-wrap="false"><p class="Failed">Failed: {{ numberFailed }} / {{ toUploadData.data.length }}</p></td>

</tr>

</table>

<mat-progress-bar

class="example-margin"

[color]="'primary'"

[mode]="'determinate'"

[value]="progressValue"

>

</mat-progress-bar>

</mat-card>

<div class="mat-elevation-z8">

<table id="uploadResult" mat-table [dataSource]="uploadResult" class="mat-elevation-z8" width="100%">

<!--- Note that these columns can be defined in any order.

The actual rendered columns are set as a property on the row definition" -->

<!-- Country Code Column -->

<ng-container matColumnDef="countryCode">

<th mat-header-cell *matHeaderCellDef> Country Code </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.dataRecord.countryCode}} </td>

</ng-container>

<!-- Country Name Column -->

<ng-container matColumnDef="countryName">

<th mat-header-cell *matHeaderCellDef> Name </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.dataRecord.countryName}} </td>

</ng-container>

<!-- ISO Alpha3 Code Column -->

<ng-container matColumnDef="ISOAlpha3Code">

<th mat-header-cell *matHeaderCellDef> ISO Alpha3 Code </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.dataRecord.ISOAlpha3Code}} </td>

</ng-container>

<!-- ISO Alpha2 Code Column -->

<ng-container matColumnDef="ISOAlpha2Code">

<th mat-header-cell *matHeaderCellDef> ISO Alpha2 Code </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.dataRecord.ISOAlpha2Code}} </td>

</ng-container>

<!-- ISO Numeric Code Column -->

<ng-container matColumnDef="ISONumericCode">

<th mat-header-cell *matHeaderCellDef> ISO Numeric Code </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.dataRecord.ISONumericCode}} </td>

</ng-container>

<!-- Currency Code Column -->

<ng-container matColumnDef="currencyCode">

<th mat-header-cell *matHeaderCellDef> Currency Code </th>

<td mat-cell *matCellDef="let element" align="left"> {{element.dataRecord.currencyCode}} </td>

</ng-container>

<!-- Record Status Column -->

<ng-container matColumnDef="recordStatus">

<th mat-header-cell *matHeaderCellDef> Record Status </th>

<td mat-cell *matCellDef="let row">

<button mat-button color="primary" *ngIf="row.recordStatus === I_NEW_RECORD_INDICATOR"><mat-icon>add_circle</mat-icon></button>

<button mat-button color="primary" *ngIf="row.recordStatus === I_MODIFIED_RECORD_INDICATOR"><mat-icon>create</mat-icon></button>

<button mat-button color="warn" *ngIf="row.recordStatus === I_INVALID_RECORD_INDICATOR"><mat-icon>clear</mat-icon></button>

<button mat-button color="basic" *ngIf="row.recordStatus === I_UNCHANGED_RECORD"><mat-icon>cloud_off</mat-icon></button>

</td>

</ng-container>

<!-- Update Status Column -->

<ng-container matColumnDef="updateStatus">

<th mat-header-cell *matHeaderCellDef> Update Status </th>

<td mat-cell *matCellDef="let row">

<button mat-button color="primary" *ngIf="row.updateStatus === I_UPDATE_STATUS_SUCCESSFUL"><mat-icon>mood</mat-icon></button>

<button mat-button color="warn" *ngIf="row.updateStatus === I_UPDATE_STATUS_FAILED"><mat-icon>error</mat-icon></button>

<button mat-button color="basic" *ngIf="row.updateStatus === I_YET_TO_UPDATE"><mat-icon>notifications_active</mat-icon></button>

<button mat-button color="basic" *ngIf="row.updateStatus === I_NO_ACTION"><mat-icon>notifications_none</mat-icon></button>

</td>

</ng-container>

<tr mat-header-row *matHeaderRowDef="statusDisplayedColumns"></tr>

<tr mat-row *matRowDef="let row; columns: statusDisplayedColumns;"></tr>

</table>

<mat-paginator #uploadResultPaginator [pageSizeOptions]="[10, 15, 20]" showFirstLastButtons></mat-paginator>

</div>

</mat-card>

</form>

</mat-step>

</mat-horizontal-stepper>

</td>

</tr>

</table>

[Riccardo Sadocchi]

Hi Mr. Majumdar,

the [lienar] input must be a boolean value, your 'isLinear' is boolean value?

you define only one field per formgroup, but in your html you have more input fields, i'm not sure bat it's possible that this mark as invalid the formgroup.

You can make some test, inspect the form objet with the console or bind something (for example the next button) with this property (like [disabled]="this.firstFormGroup.invalid", you must understand what lock the stepper

[samee...@coditas.com]

Hello Riccardo,

I am facing the same issue but in my case the second step form is VALID and as per the stepper docs it should move to the next step. but nothing is happening and user is stuck on the step 2.

[Sander Elias]

Hi Sameer,

I did a sample of that somewhere in this group. I lack the time now to look it up, but it's there. I'm 100% sure.

Regards

Sander

[Sander Elias]

Hi Sameer,

I had some time and found the sample I created. Have a look at it, and if you still have questions, don't hesitate to ask them.

Regards

Sander

[Dhruti Desai]

Hi Elias,

I am a rookie in Angular. Started working on it few days back. So excuse me for any stupid questions.

Elias, Your sample helped. But I am bit confused.

I have few 5 steppers in a single form. Each steppers have few TextBoxes which should not be blank. I want user to fill the first stepper and than should move to next stepper.

I used 'Linear' attribute but it doesn't work. 

Can you guide me through it?

[Sander Elias]

Hi Dhruti,

Can you make a StackBlitz that shows the issue you have?

Regards

Sander