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

<form [formGroup]="form">
	<div class="columns">
		<div class="column">
			<label for="title">
				<span>
					{{ 'creation.choose_title' | translate }}
				</span>
			</label>
			<br />
			<input
				class="input"
				matInput
				[placeholder]="'creation.choose_title_placeholder' | translate"
				formControlName="title"
				id="title"
				(keyup)="updateSlug()"
				required="required"
				#title
			/>
			<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>
			<mat-error class="hint deletable-field-hint" *ngIf="form.controls.title.invalid">
				{{ getErrorMessage(form.controls.title) }}</mat-error
			>

			<br />
			<label for="creatorEmail">
				<span>
					{{ 'creation.email' | translate }}
				</span>
			</label>
			<br />
			<input
				#creatorEmail
				matInput
				type="email"
				placeholder="{{ 'creation.email_placeholder' | translate }}"
				formControlName="creatorEmail"
				id="creatorEmail"
				required
			/>
			<button
				mat-button
				*ngIf="form.value.creatorEmail"
				matSuffix
				mat-icon-button
				aria-label="Clear"
				(click)="form.patchValue({ creatorEmail: '' })"
			>
				<i class="fa fa-close"></i>
			</button>
			<mat-error class="hint deletable-field-hint" *ngIf="form.controls.creatorEmail.invalid">{{
				getErrorMessage(form.controls.creatorEmail)
			}}</mat-error>
			<br />

			<p>
				<label class="" for="creatorPseudo">
					<span>
						{{ 'creation.name' | translate }}
					</span>
				</label>
				<br />
				<input
					#creatorPseudo
					matInput
					placeholder="pseudo"
					formControlName="creatorPseudo"
					id="creatorPseudo"
					required
				/>
				<button
					mat-button
					*ngIf="form.value.creatorPseudo"
					matSuffix
					mat-icon-button
					aria-label="Clear"
					(click)="form.patchValue({ creatorPseudo: '' })"
				>
					<i class="fa fa-close"></i>
				</button>
			</p>
		</div>

		<hr />
	</div>
</form>