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

<div class="step">
	<form [formGroup]="form">
		<section class="poll-title">
			<h2 class="title is-2">
				{{ 'creation.choose_title' | translate }}
			</h2>
			<div class="columns">
				<div class="column">
					<label class="hidden" for="title">Titre</label>
					<input
						class="input-lg"
						#title
						[placeholder]="'creation.choose_title_placeholder' | translate"
						formControlName="title"
						aria-placeholder="Quel resto ce soir ?"
						placeholder="Quel resto ce soir ?"
						id="title"
						autofocus="autofocus"
						(change)="updateSlug()"
						required
					/>
				</div>
				<div class="column is-narrow">
					<button
						mat-button
						*ngIf="title.value"
						matSuffix
						mat-icon-button
						aria-label="Clear"
						(click)="title.value = ''"
					>
						<i class="fa fa-close"></i>
					</button>
				</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>
					<textarea
						class="ui-inputtextarea"
						#description
						matInput
						id="descr"
						class="is-large is-full"
						placeholder="Description"
						formControlName="description"
						required
					></textarea>
					<div class="text-info">
						300 caractères maximum
					</div>
				</div>
				<div class="column">
					<button
						mat-button
						*ngIf="description.value"
						matSuffix
						mat-icon-button
						aria-label="Clear"
						(click)="description.value = ''"
					>
						<i class="fa fa-close"></i>
					</button>
				</div>
			</div>
		</div>
	</form>
</div>