Mise à jour - Existe-t-il un moyen d'utiliser un modèle de formulaire général pour plusieurs formes angulaires

Question

Mise à jour de ma question pour être plus précis.

Je travaille sur un projet angulaire 2 et j'ai un modèle de formulaire général que je souhaite utiliser pour environ 5 formulaires, car ils utilisent tous le même code html. J'ai choisi de le faire de cette façon afin d'éviter de créer plusieurs modèles avec une structure html en double.

Les champs, y compris le type de widget, font partie de mon modèle de données qui provient du serveur. À l'intérieur de mon composant de forme générale, ces types de widget sont utilisés pour renvoyer le code HTML du widget. À l'intérieur de mon template, la directive innerHTML prend le html retourné et le rend dans la vue. Le modèle ne sait rien sur les contrôles de formulaire. Il prend juste les données de forme du serveur, et rend les résultats. Ce modèle n'est pas seulement utilisé pour les formulaires standard, mais également pour les filtres, car les filtres sont simplement une autre forme. Il existe également un composant général de filtres qui étend le composant de formulaire. Donc, pour mes filtres, j'aimerais pouvoir lier ces champs à mes données pour filtrer une liste d'éléments. Le problème est que puisque le html du widget est rendu à l'intérieur du composant, et ajouté au dom en utilisant innerHTML dans la vue, il n'y a aucun moyen d'utiliser ngModel sur les entrées. Peut-être une façon de le faire peut-être d'utiliser ngSwitch à l'intérieur du modèle pour rendre le widget correct basé sur le type de widget, mais je n'étais pas exactement sûr.

Answer 1

Vous pouvez créer un composant de formulaire générique pour cela et utiliser le composant comme vous le souhaitez.

Si vous ne pouvez pas créer un composant générique, vous pouvez également utiliser exactement le même modèle html pour tout composant que vous créez. Supposons que vous avez comp1 et comp2

@Component({ 
    selector: 'comp1', 
    templateUrl: 'MyGenericTemplate.html' 
}) 

@Component({ 
    selector: 'comp2', 
    templateUrl: 'MyGenericTemplate.html' 
})