I have progressed from A3 to A2 step, but I need to add a horizontal line between them. How can I achieve this and is it possible to do so using CSS styles?
I have progressed from A3 to A2 step, but I need to add a horizontal line between them. How can I achieve this and is it possible to do so using CSS styles?
To determine the maximum value between the selected indexes and the original index of 0, simply use the Math.max function. Below is a functional example for validation purposes:
ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MAT_STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
import { ViewChild } from '@angular/core';
/**
* @title Stepper that displays errors in the steps
*/
@Component({
selector: 'stepper-errors-example',
templateUrl: 'stepper-errors-example.html',
styleUrls: ['stepper-errors-example.css'],
providers: [
{
provide: MAT_STEPPER_GLOBAL_OPTIONS,
useValue: { showError: true },
},
],
})
export class StepperErrorsExample implements OnInit {
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
selectedIndex = 0;
constructor(private _formBuilder: FormBuilder) {}
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
firstCtrl: ['', Validators.required],
});
this.secondFormGroup = this._formBuilder.group({
secondCtrl: ['', Validators.required],
});
}
selectedIndexChange(event: any) {
if (
event &&
event.previouslySelectedStep &&
!event.previouslySelectedStep.errorMessage
) {
this.selectedIndex = Math.max(this.selectedIndex, event.selectedIndex);
} else {
this.selectedIndex = event.selectedIndex;
}
}
}
html
<mat-horizontal-stepper
linear
#stepper
(selectionChange)="selectedIndexChange($event)"
ngClass="{{ 'last-edited-step-' + selectedIndex }}"
labelPosition="bottom"
>
<mat-step [stepControl]="firstFormGroup" errorMessage="Name is required.">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>A1</ng-template>
<mat-form-field>
<input
matInput
placeholder="Last name, First name"
formControlName="firstCtrl"
required
/>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
<mat-form-field appearance="outline">
<mat-label>Outline form field</mat-label>
<input matInput placeholder="Placeholder" />
<mat-hint>Hint</mat-hint>
</mat-form-field>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup" errorMessage="Address is required.">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>A2</ng-template>
<mat-form-field>
<input
matInput
placeholder="Address"
formControlName="secondCtrl"
required
/>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>A3</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>
Two http GET API calls are being made in the constructor. The first call is working fine and has a getter/setter to filter the main array (studentNameData) into a filtered array (filteredName). However, the second call is also trying to do the same thing b ...
I recently encountered issues with Angular-CLI, so I decided to update it using the command $ npm install -g @angular/cli. However, after doing so, I am facing a new error message. Can anyone provide assistance with this problem? module.js:549 throw err ...
My goal is to specifically target the third div in my HTML code with a class called .counter-wrap. When viewed on a mobile device, this particular div has a margin-bottom of 40px. I am looking to eliminate the margin-bottom for only the third stacked div n ...
After spending a considerable amount of time working on my game, I made the decision to change my navigation bars to buttons. However, I'm facing issues while trying to finalize the style that I had previously. Here is the old code fiddle: https://js ...
Is there any way to display an image by default instead of options? Code: <select id="example-post" style="width:120px;!important;" class="footerSelect" name="multiselect[]" multiple="multiple"> <opti ...
Struggling with customizing my JavaFX application using CSS. Everything was going smoothly until I encountered the Datepicker. Despite trying various approaches, none seem to be working. Is there a way to round the Datepicker just like my TextFields? Here ...
I'm looking to create a dynamic dropdown list using Javascript or JQuery that mirrors the functionality of selecting countries, states, and cities. Can someone provide guidance on the best code to achieve this? Below is a snippet of my existing code: ...
When running "ionic capacitor run android" in my Mac terminal, I can manually click the play button in Android Studio to view the application with its updated code changes. On the other hand, if I use "ionic capacitor run android -l" in my Mac terminal, t ...
I'm facing a challenge with implementing a CSS feature and need some assistance. https://i.stack.imgur.com/KXpGd.png Upon clicking the "See link options" button, the content loads but spills out of the popper. My goal is to have the popper expand in ...
When attempting to enclose a selected string between two characters, I am encountering an issue. For example, when selecting 'test' and clicking on the change button, the selected text should change to 'atestb'. However, although I am a ...
I have successfully created an Angular application that mirrors the functionality of However, I encountered a limitation where only 50 positions are available per page, To fetch additional jobs beyond the initial 50, I need to append "?page=X" to another ...
I recently acquired the SmartAdmin Theme for my project development needs. It worked seamlessly with AngularJS, but I encountered numerous errors when attempting to integrate it with Angular2. I have attached screenshots showing the issues for your referen ...
Is there a method to prevent the appearance of the white square known as "Focus to toolbar" in TinyMCE? Clarification: Upon pressing Alt+F10 in TinyMCE, a white square is outlined around a button on the toolbar. This allows navigation among toolbar butto ...
I am trying to create a page border by wrapping it around the content using a <div> element. The parent element is the actual page itself. However, I'm having trouble with the margin-bottom property as it doesn't seem to be working properly ...
https://i.stack.imgur.com/M9reE.jpg https://i.stack.imgur.com/Yyg4g.jpg Upon inspection of the provided images, it is evident that the src URL points to a location within the nextjs public folder. The issue arises when there is no internet connection - i ...
I have a situation where I am utilizing the *ngFor directive to display table data with the help of *ngFor="let record of records". In this scenario, I am looking to assign a custom CSS class to the 'record' based on specific conditions; for exam ...
Could someone please explain why the margin stops working when I remove the float property? Is there a connection that I am missing? .header-image { float: left; width: 33%; margin-top: 1em; padding-right: 3em; text-align: right; } ...
After experimenting with Angular 2 and following the guide on their website, I attempted to switch to Angular 2 CLI. However, the Angular 2 CLI project does not have the latest dependencies, resulting in errors from the compiler related to certain commands ...
I am currently developing a single-page web application using Angular 6, and I recently integrated the ngx-toast library into my project. However, I encountered an issue when trying to load the libraries by adding the following Sass code with the "~" symb ...
I am trying to implement a drop-down list with bullets using Angular 2, JavaScript, and CSS. Although I have managed to create the drop-down list, I am facing difficulty in adding bullets to the list items. Unfortunately, I have found that jQuery and Boot ...