multiple choices for creation

This commit is contained in:
tykayn 2020-11-03 16:13:47 +01:00 committed by Baptiste Lemoine
parent e5b8d5b65e
commit fa534af3ab
3 changed files with 43 additions and 9 deletions

View File

@ -5,7 +5,10 @@
<span class="pre-selector" i18n>
{{ 'creation.want' | translate }}
</span>
<button class="btn btn--warning"><span class="i fa fa-refresh"></span> Reset</button>
<button class="btn btn--warning" (click)="askInitFormDefault()">
<i class="fa fa-refresh"></i>
Tout réinitialiser
</button>
<form [formGroup]="form">
<div class="form-field">
@ -22,13 +25,15 @@
</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" />
<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>
</span>
</div>
</div>
</span>
</div>

View File

@ -1,3 +1,4 @@
@import '../../../../styles/variables';
:host {
input,
textarea {
@ -10,7 +11,13 @@
display: block;
margin-top: 1em;
}
.form-row {
margin-top: 0.5em;
border-left: solid 3px $primary_color;
padding-left: 1em;
}
.fa {
margin-right: 1em;
color: $primary_color;
}
}

View File

@ -3,6 +3,7 @@ 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';
import { ToastService } from '../../../core/services/toast.service';
@Component({
selector: 'app-admin-form',
@ -18,7 +19,12 @@ export class FormComponent implements OnInit {
public urlPrefix: string = window.location.origin + '/participation/';
constructor(private fb: FormBuilder, private uuidService: UuidService, private apiService: ApiService) {}
constructor(
private fb: FormBuilder,
private uuidService: UuidService,
private toastService: ToastService,
private apiService: ApiService
) {}
ngOnInit(): void {
this.initFormDefault();
@ -58,10 +64,9 @@ export class FormComponent implements OnInit {
reinitChoices() {
this.choices.setValue([]);
this.addChoice();
}
private initFormDefault() {
initFormDefault() {
this.form = this.fb.group({
title: ['', [Validators.required, Validators.minLength(12)]],
creatorPseudo: ['', [Validators.required]],
@ -79,11 +84,28 @@ export class FormComponent implements OnInit {
});
console.log('this.form ', this.form);
this.addChoice();
this.addChoice();
this.addChoice();
this.form.patchValue({
title: 'mon titre',
description: 'répondez SVP <3 ! *-* ',
slug: this.uuidService.getUUID(),
creatorPseudo: 'Chuck Norris',
creatorEmail: '',
choices: ['matin', 'midi'],
isAboutDate: true,
isProtectedByPassword: false,
isOwnerNotifiedByEmailOnNewVote: false,
isOwnerNotifiedByEmailOnNewComment: false,
isMaybeAnswerAvailable: false,
areResultsPublic: true,
expiracyNumberOfDays: 60,
});
// this.addChoice();
}
askInitFormDefault() {
this.initFormDefault();
this.toastService.display('formulaire réinitialisé', 'info');
}
}