src/components-examples/material/stepper/stepper-intl/stepper-intl-example.html - main - githubmirror/components

src/components-examples/material/stepper/stepper-intl/stepper-intl-example.html

58 строк2 KB

Kristiyan Kostadinov

refactor(multiple): switch button selectors

14 мар 2025, 09:04

14 мар 2025, 09:04103ac7c

<label for="demo-optional-label-group">Pick the text for the optional label</label>
<mat-radio-group
  id="demo-optional-label-group"
  class="demo-radio-group"
  [(ngModel)]="optionalLabelText"
  (ngModelChange)="updateOptionalLabel()">
  @for (optionalLabelTextChoice of optionalLabelTextChoices; track optionalLabelTextChoice) {
    <mat-radio-button
      class="demo-radio-button"
      [value]="optionalLabelTextChoice">{{optionalLabelTextChoice}}</mat-radio-button>
  }
</mat-radio-group>
<mat-stepper class="demo-stepper" #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field class="demo-form-field">
        <mat-label>Name</mat-label>
        <input
          matInput
          placeholder="Last name, First name"
          formControlName="firstCtrl"
          required
        />
      </mat-form-field>
      <div>
        <button matButton matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step
    [stepControl]="secondFormGroup"
    label="Fill out your address"
    optional>
    <form [formGroup]="secondFormGroup">
      <mat-form-field>
        <mat-label>Address</mat-label>
        <input
          matInput
          formControlName="secondCtrl"
          placeholder="Ex. 1 Main St, New York, NY"
        />
      </mat-form-field>
      <div>
        <button matButton matStepperPrevious>Back</button>
        <button matButton matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    <p>You are now done.</p>
    <div>
      <button matButton matStepperPrevious>Back</button>
      <button matButton (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-stepper>