funky-framadate-front/src/app/features/administration/form/base-config/base-config.component.html

<form [formGroup]="form">
	<div class="columns">
		<div class="column">
			<p>
				{{ 'creation.choose_title' | translate }}
			</p>
			<br />
			<label class="hidden" for="title">Titre</label>
			<!--			errors:-->
			<!--			<pre class="debug padded warning">-->
			<!--			form.errors :-->
			<!--				{{ form.controls.title.errors | json }}-->
			<!--			</pre-->
			<!--			>-->

			<input
				class="input is-block is-fullwidth"
				[placeholder]="'creation.choose_title_placeholder' | translate"
				formControlName="title"
				id="title"
				autofocus="autofocus"
				(change)="updateSlug()"
				required="required"
				#title
			/>

			<app-erasable-input [inputModel]="form.value.title"></app-erasable-input>
			<span class="button is-error" *ngIf="form.controls.title.errors">
				Ce champ est requis
			</span>
			<button
				mat-button
				*ngIf="form.value.title"
				matSuffix
				mat-icon-button
				aria-label="Clear"
				(click)="form.patchValue({ title: '' })"
			>
				<i class="fa fa-close"></i>
			</button>

			<p>
				<label for="creatorPseudo">
					<span>
						{{ 'creation.email' | translate }}
					</span>
				</label>

				<input
					#creatorEmail
					matInput
					placeholder="{{ 'creation.email_placeholder' | translate }}"
					formControlName="creatorEmail"
					id="creatorEmail"
					required
				/>
			</p>
			<br />

			<p>
				<label class="" for="creatorPseudo">
					<span>
						{{ 'creation.name' | translate }}
					</span>
				</label>
				<input
					#creatorPseudo
					matInput
					placeholder="pseudo"
					formControlName="creatorPseudo"
					id="creatorPseudo"
					required
				/>
			</p>
		</div>

		<hr />
	</div>
	custom url:
	{{ form.value.custom_url }}
	<hr />
	<div class="columns">
		<div class="column">
			<!--			<img src="assets/img/undraw_Moving_twwf.svg" alt="image WIP" />-->
			<div>
				<h2>
					{{ 'choices.title' | translate }}
				</h2>
				{{ 'dates.add' | translate }}
				<p>
					<i>
						{{ 'choices.helper' | translate }}
					</i>
				</p>
				{{ 'choices.answer_preset_1' | translate }}
				{{ 'choices.add' | translate }}
				{{ 'choices.continue' | translate }}
			</div>
		</div>
	</div>
	<div class="column">
		<button class="btn btn--warning" (click)="askInitFormDefault()">
			<i class="fa fa-refresh"></i>
			Tout réinitialiser
		</button>
		<br />

		<br />
		<button class="btn is-default" (click)="automaticSlug()">
			<i class="fa fa-refresh"></i>
			Slug automatique
		</button>
	</div>
</form>