angular-material-stepper

CSS for completed mat-step in mat-vertical-stepper

由 随声附和 提交于 2020-05-26 06:27:41
问题 In mat-vertical-stepper I have 4 mat-step . How can I have tick-mark once 1st step is completed? I tried: <mat-vertical-stepper style="background:#f2ecec;" #stepper [linear]="true"> <mat-step label="General Details" [stepControl]="generalDetailsForm" completed="true" editable="true"> <h3> Name </h3> </mat-step> </mat-vertical-stepper> If I make editable="false" , it is giving a tick mark and can't be editable as I made it "false" . Having only completed="true" I am not getting any tick mark

CSS for completed mat-step in mat-vertical-stepper

由 南楼画角 提交于 2020-05-26 06:24:08
问题 In mat-vertical-stepper I have 4 mat-step . How can I have tick-mark once 1st step is completed? I tried: <mat-vertical-stepper style="background:#f2ecec;" #stepper [linear]="true"> <mat-step label="General Details" [stepControl]="generalDetailsForm" completed="true" editable="true"> <h3> Name </h3> </mat-step> </mat-vertical-stepper> If I make editable="false" , it is giving a tick mark and can't be editable as I made it "false" . Having only completed="true" I am not getting any tick mark

separate mat-horizontal-stepper labels and content

由 本小妞迷上赌 提交于 2019-12-24 12:09:17
问题 I want the stepper labels to be shown in a toolbar, but the content to be shown in another div. something like: <div> <mat-horizontal-stepper md-stretch-steppers="always"> <mat-step> <ng-template matStepLabel>Head 1</ng-template> </mat-step> <mat-step> <ng-template matStepLabel>Head 1</ng-template> </mat-step> </mat-horizontal-stepper> </div> <div> <any-components></any-components> </div> <div id="contents"> [contents goes here] </div> can i separate the stepper labels from the content? 来源：

separate mat-horizontal-stepper labels and content

由 我是研究僧i 提交于 2019-12-24 12:07:40
问题 I want the stepper labels to be shown in a toolbar, but the content to be shown in another div. something like: <div> <mat-horizontal-stepper md-stretch-steppers="always"> <mat-step> <ng-template matStepLabel>Head 1</ng-template> </mat-step> <mat-step> <ng-template matStepLabel>Head 1</ng-template> </mat-step> </mat-horizontal-stepper> </div> <div> <any-components></any-components> </div> <div id="contents"> [contents goes here] </div> can i separate the stepper labels from the content? 来源：

Angular Material Mat-Stepper: How to use the same formgroup for multiple steps?

由 拈花ヽ惹草 提交于 2019-12-23 17:08:14
问题 This is my form group. I'm using a form group inside another one: this.shopGroup = this.fb.group({ _user: [''], name: ['', Validators.compose([Validators.required, Validators.maxLength(60)])], url_name: [''], desc: ['', Validators.compose([Validators.required, Validators.maxLength(600)])], photos: [''], currency: ['Real'], language: ['Português do Brasil'], address: this.fb.group({ zipcode: ['', Validators.compose([Validators.required, Validators.pattern('[0-9]{5}[\-]?[0-9]{3}')])], street: [

MatHorizontalStepper stepControl with template driven forms

由 偶尔善良 提交于 2019-12-23 09:27:27
问题 Is there any way to use [stepControl] error matcher with template driven forms? The docs just teach about an AbstractControl instance, which apparently forces the use of a reactiveForm. I've tried to use [stepControl]="myNgForm" and [linear]="true" to validate the steps but the stepper just ignores it. I appreciate any help. Thanks! 回答1: The step control seems to work with "form.control". Here an example with one form per step and template driven forms. <mat-vertical-stepper [linear]="true">

How to submit forms in Stepper in Angular 4 material?

由 人盡茶涼 提交于 2019-12-12 09:19:33
问题 How to submit form data in the stepper of angular material. I am following the example from angular material https://material.angular.io/components/stepper/examples. I did lot of googling before asking this question, but not found any answer. <mat-horizontal-stepper [linear]="isLinear" #stepper="matHorizontalStepper"> <mat-step [stepControl]="firstFormGroup"> <form [formGroup]="firstFormGroup"> <ng-template matStepLabel>Fill out your name</ng-template> <mat-form-field> <input matInput

How to set 2 default open items in Material Stepper?(Angular)

由 二次信任 提交于 2019-12-11 17:57:42
问题 I tried to use selectedIndex and it opens only one item default. I would like to open 2 or more items in Material Stepper by default. I have an example (https://stackblitz.com/edit/ng-mat-beta-12-luhe7n?file=app%2Fapp.component.ts). I would like to open without the timeout and 2 or 3 items by default. I would appreciate any help. 来源： https://stackoverflow.com/questions/55936137/how-to-set-2-default-open-items-in-material-stepperangular

Using separate components in a linear mat-horizontal-stepper

由 眉间皱痕 提交于 2019-12-08 02:48:03
问题 In Angular, is it possible to have a linear stepper where the individual steps are separate components? For example: <mat-horizontal-stepper [linear]="isLinear"> <mat-step [stepControl]="firstFormGroup" label="Some Form"> <first-component></first-component> </mat-step> <mat-step [stepControl]="secondFormGroup" label="Another Form"> <second-component></second-component> </mat-step> <mat-step [stepControl]="thirdFormGroup" label="Review"> <third-component></third-component> </mat-step> </mat

Using separate components in a linear mat-horizontal-stepper

由 三世轮回 提交于 2019-12-06 09:38:22
In Angular, is it possible to have a linear stepper where the individual steps are separate components? For example: <mat-horizontal-stepper [linear]="isLinear"> <mat-step [stepControl]="firstFormGroup" label="Some Form"> <first-component></first-component> </mat-step> <mat-step [stepControl]="secondFormGroup" label="Another Form"> <second-component></second-component> </mat-step> <mat-step [stepControl]="thirdFormGroup" label="Review"> <third-component></third-component> </mat-step> </mat-horizontal-stepper> When I try this, I receive the following error upon hitting the matStepperNext button
订阅 angular-material-stepper