formGroup
pour rendre dynamiquement un formulaire simple avec différents types de contrôles et de validation.
C'est un début primitif. Il pourrait évoluer pour prendre en charge une variété de questions beaucoup plus riche,
un rendu plus gracieux et une expérience utilisateur supérieure.NgModule
appelé AppModule
.NgModule
appelé ReactiveFormsModule
.
Pour pouvoir accéder aux directives relatives aux formulaires réactifs, vous devez importer à ReactiveFormsModule
a partir de la @angular/formsbibliotheque
.Bootstrap le AppModule dans main.ts
app.module.ts
main.ts
QuestionBase
est une classe de questions fondamentale.TextboxQuestion
et DropdownQuestion
qui représentent des questions
de zone de texte et de liste déroulante. L'idée est que le formulaire sera lié à des types de questions spécifiques et
restituera les contrôles appropriés de manière dynamique.TextboxQuestion
prend en charge plusieurs types HTML5 tels que texte, email et URL via la propriété type
.DropdownQuestion
présente une liste de choix dans une zone de sélection.QuestionControlService
, un service simple pour transformer les questions en un FormGroup
.
En résumé, le groupe de formulaires utilise les métadonnées du modèle de question et vous permet de
spécifier des valeurs par défaut et des règles de validation.DynamicFormComponent
est le point d'entrée et le conteneur principal du formulaire.dynamic-form.component.html
fichier-dynamique.component.ts
‹app-question›
élément composant.
La balise ‹app-question›
correspond au composant DynamicFormQuestionComponent
responsable
du rendu des détails de chaque question individuelle en fonction des valeurs
de l'objet question lié aux données.dynamic-form-question.component.html
dynamic-form-question.component.ts
ngSwitch
détermine le type de question à afficher.formGroup
d'Angular pour connecter le modèle HTML aux objets de contrôle sous-jacents,
renseignés à partir du modèle de question avec des règles d'affichage et de validation.formControlName
et formGroup
sont des directives définies dans ReactiveFormsModule
. Les modèles peuvent accéder à ces directives
directement depuis que vous avez importé ReactiveFormsModule
de AppModule
.DynamicFormComponent
attend la liste des questions sous la forme d'un tableau lié à questions @Input()
.QuestionService
.
Dans une application réelle, vous récupériez ces questions depuis le stockage.QuestionService
.
La maintenance du questionnaire consiste simplement à ajouter, mettre à jour et supprimer des objets du tableau questions
.AppComponentshell
.QuestionService
.JSON
. Cela prouve que toute entrée
d'utilisateur est liée au modèle de données. L'enregistrement et la récupération des données sont un exercice pour une autre fois.