funky-framadate-front/src/app/features/administration/stepper/stepper.component.html

<mat-vertical-stepper #stepper linear>
	<mat-step [stepControl]="pollFormGroup" class="is-expanded">
		<form [formGroup]="pollFormGroup">
			<ng-template matStepLabel>Informations du sondage</ng-template>
			<mat-form-field appearance="outline">
				<mat-label>Question posée, sujet, etc.</mat-label>
				<input #question matInput placeholder="Question posée, sujet" formControlName="question" required />
				<button
					mat-button
					*ngIf="question.value"
					matSuffix
					mat-icon-button
					aria-label="Clear"
					(click)="question.value = ''"
				>
					<i class="fa fa-close"></i>
				</button>
			</mat-form-field>
			<mat-form-field appearance="outline" class="is-flex">
				<mat-label>Url pour les participants</mat-label>
				<span matPrefix>{{ urlPrefix }}</span>
				<input #slug matInput placeholder="Url" formControlName="slug" required />
				<button
					mat-button
					*ngIf="slug.value"
					matSuffix
					mat-icon-button
					aria-label="Clear"
					(click)="slug.value = ''"
				>
					<i class="fa fa-close"></i>
				</button>
			</mat-form-field>
			<mat-form-field appearance="outline" class="is-flex">
				<mat-label>Description</mat-label>
				<textarea
					#description
					matInput
					placeholder="Description"
					formControlName="description"
					required
				></textarea>
				<button
					mat-button
					*ngIf="description.value"
					matSuffix
					mat-icon-button
					aria-label="Clear"
					(click)="description.value = ''"
				>
					<i class="fa fa-close"></i>
				</button>
			</mat-form-field>

			<div>
				<button mat-button matStepperNext>Next</button>
			</div>
		</form>
	</mat-step>

	<mat-step [stepControl]="configurationFormGroup">
		<form [formGroup]="configurationFormGroup">
			<ng-template matStepLabel>Configuration du sondage</ng-template>
			<mat-form-field appearance="outline" class="is-flex">
				<mat-label>Nombre de jours avant expiration</mat-label>
				<input
					#expiracy
					matInput
					type="number"
					placeholder="Nombre de jours avant expiration"
					formControlName="expiracyNumberOfDays"
					required
				/>
				<button
					mat-button
					*ngIf="expiracy.value"
					matSuffix
					mat-icon-button
					aria-label="Clear"
					(click)="expiracy.value = ''"
				>
					<i class="fa fa-close"></i>
				</button>
			</mat-form-field>
			<mat-checkbox class="is-flex" formControlName="areResultsPublic">
				Les participants pourront consulter les résultats
			</mat-checkbox>
			<mat-checkbox class="is-flex" formControlName="isAboutDate">
				Les choix possibles concerneront des dates
			</mat-checkbox>
			<mat-checkbox class="is-flex" formControlName="isProtectedByPassword">
				Le sondage sera protégé par un mot de passe
			</mat-checkbox>
			<mat-checkbox class="is-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
				Vous recevrez un mail à chaque nouvelle participation
			</mat-checkbox>
			<mat-checkbox class="is-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
				Vous recevrez un mail à chaque nouveau commentaire
			</mat-checkbox>
			<mat-checkbox class="is-flex" formControlName="isMaybeAnswerAvailable">
				La réponse « peut-être » sera disponible
			</mat-checkbox>

			<div>
				<button mat-button matStepperPrevious>Back</button>
				<button mat-button matStepperNext>Next</button>
			</div>
		</form>
	</mat-step>

	<mat-step>
		<ng-template matStepLabel>Done</ng-template>
		<p>You are now done.</p>
		<div>
			<button mat-button matStepperPrevious>Back</button>
			<button mat-button (click)="stepper.reset()">Reset</button>
		</div>
		<div>
			<button mat-button (click)="savePoll()" [disabled]="!pollFormGroup.valid || !configurationFormGroup.valid">
				Enregistrer le sondage
			</button>
		</div>
	</mat-step>
</mat-vertical-stepper>