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

import { Component, Input, OnInit } from '@angular/core';
import { Poll } from '../../../core/models/poll.model';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UuidService } from '../../../core/services/uuid.service';
import { ApiService } from '../../../core/services/api.service';

@Component({
	selector: 'app-admin-form',
	templateUrl: './form.component.html',
	styleUrls: ['./form.component.scss'],
})
export class FormComponent implements OnInit {
	@Input()
	public poll?: Poll;
	public form: FormGroup;

	public longFormVersionEnabled = true;

	public urlPrefix: string = window.location.origin + '/participation/';

	constructor(private fb: FormBuilder, private uuidService: UuidService, private apiService: ApiService) {}

	ngOnInit(): void {
		this.initFormDefault();
	}

	public createPoll(): void {
		if (this.form.valid && this.form.valid) {
			console.log('Le sondage est correctement rempli, prêt à enregistrer.');
			// TODO : save the poll
			this.apiService.createPoll(this.poll);
		}
	}

	public updateSlug() {
		let newValueFormatted = 'TODO';
		this.form.patchValue({ slug: newValueFormatted });
	}

	get choices() {
		return this.form.get('choices') as FormArray;
	}

	addChoice() {
		this.choices.push(
			this.fb.group({
				label: this.fb.control('', [Validators.required]),
				imageUrl: ['', [Validators.required]],
			})
		);
	}

	deleteChoiceField(index: number) {
		if (this.choices.length !== 1) {
			this.choices.removeAt(index);
		}
	}

	reinitChoices() {
		this.choices.setValue([]);
		this.addChoice();
	}

	private initFormDefault() {
		this.form = this.fb.group({
			title: ['', [Validators.required, Validators.minLength(12)]],
			creatorPseudo: ['', [Validators.required]],
			creatorEmail: ['', [Validators.required]],
			slug: [this.uuidService.getUUID(), [Validators.required]],
			description: ['', [Validators.required]],
			choices: new FormArray([]),
			isAboutDate: [true, [Validators.required]],
			isProtectedByPassword: [false, [Validators.required]],
			isOwnerNotifiedByEmailOnNewVote: [false, [Validators.required]],
			isOwnerNotifiedByEmailOnNewComment: [false, [Validators.required]],
			isMaybeAnswerAvailable: [false, [Validators.required]],
			areResultsPublic: [true, [Validators.required]],
			expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]],
		});
		console.log('this.form ', this.form);

		this.form.patchValue({
			title: 'mon titre',
			description: 'répondez SVP <3 ! *-* ',
			choices: ['matin', 'midi'],
		});
		// this.addChoice();
	}
}