NgPulse

ng-pulse est une bibliothèque pour Angular conçue pour simplifier la création de formulaires basiques, principalement dans des applications de type back-office. Elle facilite la génération de formulaires à partir d'objets et permet une intégration directe avec une API pour gérer les données.

Les principales caractéristiques de ng-pulse incluent :

1. Génération automatique de formulaires : Avec ng-pulse, vous pouvez créer des formulaires dynamiques en passant un objet de configuration. Cela permet de créer des interfaces utilisateur rapidement, sans avoir à coder chaque champ individuellement.
2. Service CRUD générique : La bibliothèque inclut un service CRUD prêt à l'emploi, permettant de communiquer facilement avec une API. Cela signifie que vous pouvez effectuer des opérations courantes (créer, lire, mettre à jour et supprimer des données) sans avoir à redéfinir les mêmes fonctions à chaque fois.

Installation

Pour installer ng-pulse, il suffit de lancer cette commande npm dans votre terminal.

npm i ng-form

Configuration et Utilisation

Configuration app.config

import { ApplicationConfig, importProvidersFrom } from  "@angular/core";
import { NgPulseModule } from  "ng-pulse";

export  const  appConfig:  ApplicationConfig  = {
	providers: [
		// your providers
		importProvidersFrom(
			NgPulseModule.forRoot({ apiUrl:  '' })  // apiUrl ex: http://localhost:8000
		),
	],
};

Component.ts

import { Component } from  "@angular/core";
import { Validators } from  "@angular/forms";
import { NgFormPulseComponent, NgPulseForm, TypeForm } from  "ng-pulse";

@Component({
	selector:  "app-user",
	standalone:  true,
	imports: [NgFormPulseComponent],
	templateUrl:  "./user.component.html",
	styleUrl:  "./user.component.scss",
})
export  class  UserComponent {

profil  = [
	{
		id:  0,
		name:  "Admin",
		description:  "Administrateur",
	},
	{
		id:  1,
		name:  "Super-Admin",
		description:  "Super Administrateur",
	},
];

formUser:  NgPulseForm  = {
	model:  "user", // model api
	formGroup: [
		{
		label:  "Nom",
		field: {
			value:  "",
			control:  "name",
			typeForm:  TypeForm.TEXT,
		},
		validator: [Validators.required],
		errorValidator:  "Nom est requis.",
		},
		{
		label:  "Email",
		field: {
			value:  "",
			control:  "email",
			typeForm:  TypeForm.TEXT,
		},
		validator: [Validators.required, Validators.email],
		},
		{
		label:  "Profil",
		field: {
			value:  "",
			control:  "profil",
			typeForm:  TypeForm.SELECT,
			dataSelect:  this.profil, // of(this.profil)
			keyViewSelect:  "name",
			valueSelect:  "id",
		},
		validator: [Validators.required],
		},
	],
};
}

Component.html

<ng-form-pulse
	titleForm="Création Utilisateur"
	[ngFormPulse]="formUser"
></ng-form-pulse>

Interface ng-pulse

export  interface  NgPulseForm {
	model:  string;
	formGroup:  NgPulseFormGroup[];
}

Le modèle ici correspond au modèle de vos points de terminaison (endpoints). Par exemple, si votre apiUrl dans la configuration est http://localhost:8000 et que votre modèle est user, cela signifie que lorsque vous effectuez une requête POST, l'URL sera http://localhost:8000/user.

export  enum  TypeForm {
	TEXT  =  "text",
	NUMBER  =  "number",
	SELECT  =  "select",
	TEXTAREA  =  "textarea",
	RADIO  =  "radio",
	CHECKBOX  =  "checkbox",
	DATE  =  "date",
}

export  interface  NgPulseForm {
	model:  string;
	formGroup:  NgPulseFormGroup[];
}

export  interface  NgPulseFormGroup {
	label:  string;
	field:  NgPulseFieldForm;
	validator?:  ValidatorFn[];
	errorValidator?:  string;
	width?:  number;
}

export  interface  NgPulseFieldForm {
	control:  string;
	typeForm:  TypeForm;
	value?:  string  |  number  |  string[] |  number[];
	placeholder?:  string;
	//for select
	dataSelect?:  any[] |  Observable<any[]>;
	valueSelect?:  string;
	keyViewSelect?:  string;
	whereFilter?:  WhereFilter<any>;
	getFetchData?:  GetFetchData;
	viewField?:  ViewField[];
}



export  interface  WhereFilter<T> {
where: {
		[K  in  keyof  T]?:  string;
	};
}


export  interface  GetFetchData {
	methode:  Methode;
	url:  string;
	body?:  any;
}

export  enum  Methode {
	GET  =  "get",
	POST  =  "post",
}

export  interface  ViewField {
	controlLink?:  string;
	value?:  any;
	hidden?:  boolean;
	disabled?:  boolean;
}