/
githubmirror
/
components
Обзор
Документация
Войти
/
githubmirror
/
components
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html
44 строки
2 KB
Michael Small
docs: convert Stepper/Tabs/Timepicker example to signals (#33536)
21 июл 2026, 10:25
Не верифицирован
21 июл 2026, 10:25
43a87a4
Код
Авторство
О чём код?
<button matButton="elevated" (click)="isEditable.set(!isEditable())"> {{!isEditable() ? 'Enable edit mode' : 'Disable edit mode'}} </button> <mat-stepper linear #stepper> <!-- #docregion editable --> <mat-step [stepControl]="firstFormGroup" [editable]="isEditable()"> <!-- #enddocregion editable --> <form [formGroup]="firstFormGroup"> <!-- #docregion step-label --> <ng-template matStepLabel>Fill out your name</ng-template> <!-- #enddocregion step-label --> <mat-form-field> <mat-label>Name</mat-label> <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required> </mat-form-field> <div> <button matButton matStepperNext>Next</button> </div> </form> </mat-step> <mat-step [stepControl]="secondFormGroup" [editable]="isEditable()"> <form [formGroup]="secondFormGroup"> <ng-template matStepLabel>Fill out your address</ng-template> <mat-form-field> <mat-label>Address</mat-label> <input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY" required> </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>