include advanced choices and toggle visibility of sub component

src/app/features/administration/form/advanced-config/advanced-config.component.html

@@ -1,3 +1,4 @@
+<form [formGroup]="form">
 	<fieldset class="complete well">
 		<h2>{{ 'creation.advanced' | translate }}</h2>
 		<label for="descr">Description (optionnel)</label>
@@ -87,3 +88,4 @@
 			La réponse « peut-être » sera disponible
 		</mat-checkbox>
 	</fieldset>
+</form>

src/app/features/administration/form/advanced-config/advanced-config.component.ts

@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Poll } from '../../../../core/models/poll.model';
+import { FormGroup } from '@angular/forms';
 
 @Component({
 	selector: 'app-advanced-config',
@@ -7,7 +9,10 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AdvancedConfigComponent implements OnInit {
 	public urlPrefix: string = window.location.origin + '/participation/';
-
+	@Input()
+	public poll?: Poll;
+	@Input()
+	public form: FormGroup;
 	constructor() {}
 
 	ngOnInit(): void {}

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

@@ -1,8 +1,18 @@
 <form [formGroup]="form">
+	<h1>
+		{{ 'creation.title' | translate }}
+	</h1>
+
+	<p class="subtitle">
+		{{ 'creation.want' | translate }}
+	</p>
+
 	<div class="columns">
-		<span>
+		<div class="column">
+			<p>
 				{{ 'creation.choose_title' | translate }}
-		</span>
+			</p>
+			<br />
 			<label class="hidden" for="title">Titre</label>
 			<input
 				#title
@@ -14,11 +24,18 @@
 				(change)="updateSlug()"
 				required
 			/>
-		<button mat-button *ngIf="title.value" matSuffix mat-icon-button aria-label="Clear" (click)="title.value = ''">
+			<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>
+		<div class="column">
 			<label class="" for="creatorEmail">
 				<span>
 					{{ 'creation.name' | translate }}

src/app/features/administration/form/base-config/base-config.component.ts

@@ -16,6 +16,7 @@ import { Poll } from '../../../../core/models/poll.model';
 export class BaseConfigComponent implements OnInit {
 	@Input()
 	public poll?: Poll;
+	@Input()
 	public form: FormGroup;
 
 	constructor(

src/app/features/administration/form/form.component.html

@@ -1,17 +1,6 @@
 <div class="admin-form padded">
-	<h1>
+	<form [formGroup]="form">
-		{{ 'creation.title' | translate }}
+		<app-base-config [poll]="poll" [form]="form"></app-base-config>
-	</h1>
-	<div class="validation">
-		<div class="has-background-danger" *ngIf="!form.valid">
-			le formulaire est invalide
-			<pre>
-		 {{ form.errors | json }}
-		</pre
-			>
-		</div>
-	</div>
-	<app-base-config></app-base-config>
 		<!--	<app-kind-select></app-kind-select>-->
 
 		<!--			choix spécialement pour les dates-->
@@ -21,11 +10,10 @@
 			<i class="fa fa-save"></i>
 			{{ 'creation.advanced' | translate }}
 		</button>
-	<!--	<app-advanced-config ng-if="advancedDisplayEnabled"></app-advanced-config>-->
+		<app-advanced-config [poll]="poll" [form]="form" *ngIf="advancedDisplayEnabled"></app-advanced-config>
 
 		<hr />
 
-	<form [formGroup]="form">
 		<div class="columns">
 			<div class="column"></div>
 			<div class="column">
@@ -39,5 +27,14 @@
 				</button>
 			</div>
 		</div>
+		<div class="validation">
+			<div class="has-background-danger" *ngIf="!form.valid">
+				le formulaire est invalide
+				<pre>
+		 {{ form.errors | json }}
+		</pre
+				>
+			</div>
+		</div>
 	</form>
 </div>