MssForms

This library, developed by MSS development team, provides a set of components and services for building dynamic forms in Angular applications. With this library, you can create complex forms that change dynamically based on user input or other external factors. The library provides a flexible and extensible framework for building forms that meet the needs of your application.

Installation

To use this library in your Angular project, you can install it via NPM:

npm i mss-engine-forms

Usage

To use the components and services provided by this library, you need to import the MssFormsModule module into your Angular module:

import { MssFormsModule } from 'mss-engine-forms';

@NgModule({
  declarations: [/* Your app's declarations */],
  imports: [
    BrowserModule,
    MssFormsModule,
    /* Other modules */
  ],
  providers: [/* Your app's providers */],
  bootstrap: [/* Your app's bootstrap component */]
})
export class AppModule { }

Once the MssFormsModule module is imported, you can use the components and services provided by this library in your templates and components. Here is an example of using the MssFormsComponent component in a template:

<lib-mss-forms [model]="model" [isLoading]="isLoading" (onSubmit)="onSubmit($event)"></lib-mss-forms>

In this example, the MssFormsComponent is used to render a dynamic form based on an array of field definitions (fields). When the form is submitted, the submit event is emitted, and the onSubmit method is called.

Components

This library provides the following components for building dynamic forms:

• MssFormsComponent: Renders a dynamic form based on an array of field definitions.

Field Definitions

To create a dynamic form using this library, you need to define an Object of field definitions. Each field definition is an object that describes a single form field, including its type, label, validation rules, and other properties.

Here is an example of a field definition for a text input field:

  {
    email: {
      type: DynamicFormTypes.EMAIL,
      value: "",
      label: "Email",
      rules: {
        required: true,
        email: true
      },
      breakpoint: {
        lg: 6,
        md: 6,
        sm: 12,
        xs: 12
      }
    },
    password: {
      type: DynamicFormTypes.PASSWORD,
      value: "",
      label: "Password",
      rules: {
        required: true,
        minLength: 8
      },
      breakpoint: {
        lg: 6,
        md: 6,
        sm: 12,
        xs: 12
      }
    },
    description: {
      type: DynamicFormTypes.TEXTAREA,
      value: "",
      label: "Description",
      rules: {
        required: true
      },
      breakpoint: {
        lg: 6,
        md: 6,
        sm: 12,
        xs: 12
      }
    }
  }

Submit & Cancel Actions

// Submit

 submitBtnOptions: any = {
    content: 'Recharger',
    breakpoint: {
      lg: 2,
      md: 12,
    },
  };

// Cancel

 cancelBtnOptions: any = {
    content: 'Annuler',
    breakpoint: {
      lg: 2,
      md: 12,
    },
    submit:this.cancel.bind(this)
  };

Contributing

Contributions to this library are welcome. If you find a bug or have a feature request, please open an issue on the GitHub repository. If you want to contribute code, please fork the repository and create a pull request. Before creating a pull request, please make sure to run the tests and ensure that your code follows the project's coding guidelines.