1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
| import { Component } from "@angular/core";
import {
FormArray,
FormBuilder,
FormControl,
FormGroup,
Validators
} from "@angular/forms";
@Component({
selector: "app-home",
templateUrl: "./home.component.html",
styleUrls: ["./home.component.scss"]
})
export class HomeComponent {
data: any;
imageTitle: string;
longDescription: string;
questionsAndAnswers: any;
// ------------------------
demoForm: FormGroup;
arrayItems: {
id: number;
title: string;
}[];
// ------------------------
constructor(private formBuilder: FormBuilder) {
// ------------------------
this.demoForm = this.formBuilder.group({
demoArray: this.formBuilder.array([])
});
// ------------------------
}
// ------------------------
get demoArray() {
return this.demoForm.get("demoArray") as FormArray;
}
addItemTo(item) {
this.arrayItems.push(item);
this.demoArray.push(this.formBuilder.control(""));
}
removeItem() {
this.arrayItems.pop();
this.demoArray.removeAt(this.demoArray.length - 1);
}
// ------------------------
createItem(question: string, answer: string, help: string): FormGroup {
return this.formBuilder.group({
question: question,
answer: answer,
help: help
});
}
ngOnInit(): void {
// ------------------------
this.arrayItems = [];
this.image[0].questionsAndAnswers.forEach((element: any) => {
this.addItemTo({ id: element.index, title: element.question });
});
console.log(this.demoForm);
// ------------------------
}
image = [
{
id: 0,
imageTitle: "Syslog - Find Strange Things",
imageUrl:
"https://www.nginx.com/wp-content/uploads/2018/08/NGINX-logo-rgb-large.png",
description:
"Recherche de logs, analyse des services, des applications installées.. de quoi fouiller !",
longDescription:
"Notre serveur à planté durant la nuit, sans qu'aucun changement majeur n'ait été réalisé. Il semblerait que notre administrateur ait mis à jour les paquets systèmes en utilisant la commande apt. Aucune erreur ne s'est produite durant le processus. Je n'ai pas encore eu le temps d'analyser les logs du système...",
dockerRegistryLink: "https://hub.docker.com/_/nginx",
questionsAndAnswers: [
{
question: "Quel service est responsable du crash du système ?",
answer: "clamav",
help:
"Ce n'est pas parcequ'il n'y a pas d'erreur qu'il n'est pas responsable..."
},
{
question: "A quelle heure a eut lieu le crash ? (format : HH:mm)",
answer: "22:40",
help: "Le problème est survenu tard dans la nuit..."
},
{
question: "A quelle heure a eut lieu le crash ? (format : HH:mm)",
answer: "22:40",
help: "Le problème est survenu tard dans la nuit..."
},
{
question: "A quelle heure a eut lieu le crash ? (format : HH:mm)",
answer: "22:40",
help: "Le problème est survenu tard dans la nuit..."
}
],
difficulty: "MEDIUM",
image: "challenge-logs-system",
defaultCpuLimit: "1",
defaultMemoryLimit: "200",
createdDate: "2020-01-10 10:25:24",
updatedDate: "2020-01-11 10:25:24"
}
];
getImages(): any {
return this.image[0];
}
getChallengeDetails(): void {
this.data = this.getImages();
this.imageTitle = this.getImages().imageTitle;
this.longDescription = this.getImages().longDescription;
this.questionsAndAnswers = this.getImages().questionsAndAnswers;
}
} |
Génération automatique des steppers et forms en Angular
: https://stackblitz.com/edit/angular-...e.component.ts
Répondre avec citation
Partager