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

<div class="admin-form">
	<h1>
		{{ 'creation.title' | translate }}
	</h1>
	<span class="pre-selector">
		{{ 'creation.want' | translate }}
	</span>
	<button class="btn btn--warning" (click)="askInitFormDefault()">
		<i class="fa fa-refresh"></i>
		Tout réinitialiser
	</button>

	<form [formGroup]="form">
		<div class="form-field">
			<h2>Choix de réponse</h2>
			<span formArrayName="choices">
				<h3>Choix proposés</h3>
				<button (click)="addChoice()">
					<i class="fa fa-plus"></i>
					Ajouter un choix
				</button>
				<button (click)="reinitChoices()">
					<i class="fa fa-recycle"></i>
					Réinitialiser
				</button>

				<div *ngFor="let choice of choices.controls; let i = index">
					<div class="form-row" [formGroup]="choice">
						<label for="label" class="hidden">label</label>
						<input formControlName="label" id="label" placeholder="Enter a choice description" />
						<label for="imageUrl" class="imageUrl">image Url</label>
						<input formControlName="imageUrl" id="imageUrl" placeholder="URL de l' image" />
						<button (click)="deleteChoiceField(i)">
							<i class="fa fa-times"></i>
						</button>
					</div>
				</div>
			</span>
		</div>
		<div class="form-field">
			<label class="hidden" for="title">Titre</label>
			<input
				#title
				matInput
				placeholder="Votre titre de sondage"
				formControlName="title"
				id="title"
				autofocus="autofocus"
				(change)="updateSlug()"
				required
			/>
			<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>
			<label class="hidden" for="creatorEmail">creator email</label>
			<input
				#title
				matInput
				placeholder="mon-email@example.com"
				formControlName="creatorEmail"
				id="creatorEmail"
				required
			/>
		</div>
		<div>
			<label class="hidden" for="selector">kind</label>
			<select formControlName="isAboutDate" id="selector">
				<option value="true" name="polltype_date">
					{{ 'creation.kind.date' | translate }}
				</option>
				<option value="false" name="polltype_classic">
					{{ 'creation.kind.classic' | translate }}
				</option>
			</select>
		</div>

		<br />

		<hr />
		<label for="descr">Description (optionnel)</label>
		<textarea
			#description
			matInput
			id="descr"
			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>

		<label for="slug"
			>Url pour les participants

			<button
				mat-button
				*ngIf="slug.value"
				matSuffix
				mat-icon-button
				aria-label="Clear"
				(click)="slug.value = ''"
			>
				<i class="fa fa-close"></i>
			</button>
		</label>
		<br />
		<span
			>{{ urlPrefix }}
			<strong>
				{{ slug.value }}
			</strong>
		</span>
		<input #slug matInput id="slug" placeholder="Url" formControlName="slug" required />
		<br />
		<h2>
			Type de sondage
		</h2>
		<h1 class="title is-1"><i class="fa fa-calendar" aria-hidden="true"></i> {{ 'dates.title' | translate }}</h1>
		<button class="btn" (click)="form.setValue({ isAboutDate: true })">
			Spécial date
		</button>
		<button class="btn" (click)="form.controls.isAboutDate.setValue(false)">
			Classique - textes
		</button>
		<button
			[ngClass]="{ 'is-primary': !form.controls.isAboutDate.value }"
			(click)="form.controls.isAboutDate.setValue(false)"
		>
			Classique - textes
		</button>

		<h2>Version complète du formulaire</h2>
		<div appearance="outline" class="is-flex">
			<mat-label>Nombre de jours avant expiration</mat-label>
			<input
				#expiracy
				id="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>
		</div>
		<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>

		<button mat-button (click)="createPoll()" [disabled]="!form.valid || !form.valid">
			<i class="fa fa-save"></i>
			Enregistrer le sondage
		</button>
		<span class="complete well" *ngIf="longFormVersionEnabled">
			version longue du formulaire activée
		</span>
	</form>
</div>