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

<div class="admin-form">
	<h1 i18n>
		{{ 'creation.title' | translate }}
	</h1>
	<span class="pre-selector" i18n>
		{{ 'creation.want' | translate }}
	</span>
	<button class="btn btn--warning"><span class="i fa fa-refresh"></span> Reset</button>

	<form [formGroup]="form">
		<div class="form-field">
			<h2>Choix de réponse</h2>
			<span formArrayName="choices">
				<h3>Aliases</h3>
				<button (click)="addChoice()">
					<i class="fa fa-plus"></i>
					Add choice
				</button>
				<button (click)="reinitChoices()">
					<i class="fa fa-recycle"></i>
					réinitialiser
				</button>

				<div *ngFor="let choice of choices.controls; let i = index">
					<span class="form-row" [formGroup]="choice">
						<input formControlName="label" placeholder="Enter a choice description" />
						<input formControlName="imageUrl" placeholder="URL de l' image" />
						<button (click)="deleteChoiceField(i)">
							<i class="fa fa-times"></i>
						</button>
					</span>
				</div>
			</span>
		</div>
		<!--		<div class='simple' >-->
		<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 />-->
		<!--			</div >-->
		<!--			<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.setValue({isAboutDate: false})' >-->
		<!--				Classique - textes-->
		<!--			</button >-->
		<!--		<button-->
		<!--			[ngClass]="{ 'is-primary': !isAboutDate.value }"-->
		<!--			(click)='isAboutDate = false' >-->
		<!--			Classique - textes-->
		<!--		</button >-->

		<!--		</div >-->
		<!--		<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>