funky-framadate-front/src/app/features/administration/form/steps/step-one/step-one.component.html

<div class="step step-container">
	<form class="min-height" [formGroup]="pollService.form">
		<app-stepper [step_current]="1" [step_max]="5"></app-stepper>
		<section class="poll-title">
			<h2 class="title is-2">
				{{ 'creation.choose_title' | translate }}
			</h2>
			<div class="columns">
				<div class="column">
					<div>
						<label for="title">{{ 'creation.choose_title_label' | translate }}</label>
					</div>
					<input
						class="input is-fullwidth"
						#title
						[placeholder]="'creation.choose_title_placeholder' | translate"
						formControlName="title"
						(keyup)="pollService.updateSlug()"
						(blur)="pollService.updateSlug()"
						id="title"
						maxlength="140"
						autofocus="autofocus"
						required
					/>
				</div>
			</div>
		</section>
		<div class="poll-description">
			<div class="columns">
				<div class="column">
					<label for="descr">Description (optionnel)</label>
					<!--					<div class="rich-text-toggle">-->
					<!--						<label for="richTextMode">mode de saisie avancée</label>-->

					<!--						<mat-checkbox formControlName="richTextMode" id="richTextMode"></mat-checkbox>-->
					<!--					</div>-->
					<div class="rich-toolbar" *ngIf="pollService.form.value.richTextMode">
						richTextMode activé
					</div>
					<textarea
						class="ui-inputtextarea is-fullwidth is-block"
						#description
						matInput
						id="descr"
						class="is-large is-full input"
						placeholder="Description"
						formControlName="description"
						required
						maxlength="300"
					></textarea>
					<div
						class="text-info padded"
						[ngClass]="{ 'has-background-warning': pollService.form.value.description.length === 300 }"
					>
						{{ pollService.form.value.description.length }} / 300 caractères maximum
					</div>
				</div>
			</div>
		</div>
	</form>
	<p-confirmDialog #cd [style]="{ width: '50vw' }">
		<ng-template pTemplate="header">
			<h3>{{ 'creation.dialog' | translate }}</h3>
		</ng-template>
		<ng-template pTemplate="footer">
			<button
				type="button"
				pButton
				icon="pi pi-times"
				[label]="'dialogs.no' | translate"
				(click)="cd.reject()"
			></button>
			<button
				type="button"
				pButton
				icon="pi pi-check"
				[label]="'dialogs.yes' | translate"
				(click)="cd.accept()"
			></button>
		</ng-template>
	</p-confirmDialog>
	<div class="columns">
		<div class="column">
			<button pButton class="button is-warning is-fullwidth" (click)="cancelCreationDialog()">
				{{ 'SENTENCES.Cancel' | translate }}
			</button>
		</div>
		<div class="column">
			<!--				[disabled]="form.invalid"-->
			<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/2']">
				Suivant
			</button>
		</div>
	</div>
</div>