Model Form

The ModelFormComponent is an Angular component designed for handling CRUD (Create, Read, Update, Delete) operations on models within a Content Management System (CMS). It dynamically generates forms based on GraphQL metadata, facilitating the interaction with and manipulation of data associated with different models.

Properties

  • modelName (string): The name of the model for which the form is created.
  • label (string): The label for the form, displayed as the heading.
  • id (string): The ID of the object being editor or nullfor new objects.
  • delete (boolean): Indicates whether the delete button should be displayed.
  • onlyUpdateMode (boolean): Indicates whether the form should only support update mode.
  • duplicate (boolean): Indicates whether the duplicate button should be displayed.
  • logging (boolean): Enables logging for debugging purposes.
  • config (object): Configuration object for customizing form behavior.
  • showFavButton (boolean): Indicates whether the FAB (Floating Action Button) should be displayed.

Usage

<base-model-form
  [modelName]="'YourModelName'"
  [label]="'YourLabel'"
  [id]="'optionalObjectId'"
  [delete]="true"
  [onlyUpdateMode]="false"
  [duplicate]="false"
  [logging]="false"
  [config]="{ /* Your custom configuration */ }"
  [showFavButton]="true"
  (finished)="onFormFinished($event)"
></base-model-form>

Styling

The component uses Bootstrap classes for styling. You can customize the appearance by applying your own styles to the Bootstrap classes or by overriding the component's styles.

Notes

  • This component requires the following dependencies:
    • @angular/core
    • @angular/forms
    • @angular/router
    • @lenne.tech/ng-base/shared
  • It is recommended to extend ModelFormBaseComponent for complete custom services and methods instead of directly extending ModelFormComponent.
  • Ensure that GraphQL metadata is available using GraphQLMetaService before initializing the form.
  • The form dynamically generates fields based on the GraphQL metadata, making it adaptable to different model structures.
  • File handling, including image upload and deletion, is integrated into the form.
  • The FAB button provides quick access to form actions on mobile devices.
Table of Contents