Cette bibliothèque sert de bibliothèque de rendu de formulaire dynamique alimentée par JSON pour Angulaire. Cela fonctionne en fournissant un schéma JSON pour un <formio> Composant angulaire auquel ce formulaire est rendu dynamiquement dans l’application frontale. Cela permet de créer des formulaires de manière dynamique à l’aide de schémas JSON.

Matériau de l’angle

Si vous cherchez Matériau de l’angle Support, alors c’est dans une bibliothèque séparée @ https://github.com/formio/angular-material-formio

Lancer la démo

Suivez les étapes ci-dessous pour exécuter une démonstration du moteur de rendu angulaire Form.io.

  1. Assurez-vous que vous avez cela CLI angulaire installé sur votre ordinateur.
  2. Téléchargez le Application de démonstration angulaire à ton ordinateur.
  3. Entrez avec votre terminal npm install
  4. Entrez maintenant ng serve

Cela lancera un exemple d’application où vous pourrez voir toutes les fonctionnalités fournies par ce module.

Voici l’application de démonstration hébergée https://formio.github.io/angular-demo/

Utiliser dans votre application

Vous pouvez facilement rendre un formulaire dans votre application Angular 4 en référençant l’URL de ce formulaire comme suit.

<formio src='https://examples.form.io/example'></formio>

Vous pouvez également transmettre le formulaire JSON directement au moteur de rendu comme suit.

<formio [form]='{
    "title": "My Test Form",
    "components": [
        {
            "type": "textfield",
            "input": true,
            "tableView": true,
            "inputType": "text",
            "inputMask": "",
            "label": "First Name",
            "key": "firstName",
            "placeholder": "Enter your first name",
            "prefix": "",
            "suffix": "",
            "multiple": false,
            "defaultValue": "",
            "protected": false,
            "unique": false,
            "persistent": true,
            "validate": {
                "required": true,
                "minLength": 2,
                "maxLength": 10,
                "pattern": "",
                "custom": "",
                "customPrivate": false
            },
            "conditional": {
                "show": "",
                "when": null,
                "eq": ""
            }
        },
        {
            "type": "textfield",
            "input": true,
            "tableView": true,
            "inputType": "text",
            "inputMask": "",
            "label": "Last Name",
            "key": "lastName",
            "placeholder": "Enter your last name",
            "prefix": "",
            "suffix": "",
            "multiple": false,
            "defaultValue": "",
            "protected": false,
            "unique": false,
            "persistent": true,
            "validate": {
                "required": true,
                "minLength": 2,
                "maxLength": 10,
                "pattern": "",
                "custom": "",
                "customPrivate": false
            },
            "conditional": {
                "show": "",
                "when": null,
                "eq": ""
            }
        },
        {
            "input": true,
            "label": "Submit",
            "tableView": false,
            "key": "submit",
            "size": "md",
            "leftIcon": "",
            "rightIcon": "",
            "block": false,
            "action": "submit",
            "disableOnInvalid": true,
            "theme": "primary",
            "type": "button"
        }
    ]
}'></formio>

Ceci est un exemple très simple. Cette bibliothèque est capable de créer des formulaires très complexes qui incluent des signatures électroniques, des colonnes, des panneaux, des conditions de terrain et des exigences de validation, et la liste s’allonge encore et encore.

utiliser

Pour utiliser cette bibliothèque dans votre projet, vous devez d’abord l’installer en tant que dépendance.

npm install --save @formio/angular formiojs

Vous pouvez maintenant ajouter le module à votre application Angular comme suit.

import { FormioModule } from '@formio/angular';
@NgModule({
    imports: [ BrowserModule, CommonModule, FormioModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

Bibliothèques incluses

Cette bibliothèque est une combinaison de plusieurs bibliothèques qui permettent le développement rapide d’applications sans serveur à l’aide de Form.io. Ces bibliothèques sont les suivantes.

  1. Rendu de formulaire – Le moteur de rendu de formulaire en Angular
  2. Générateur de formes – Le créateur de formulaire dans Angular
  3. Gestionnaire de formulaires – L’application de gestion des formulaires pour la gestion des formulaires.
  4. Authentification – Permet un moyen simple de fournir une authentification Form.io dans votre application.
  5. Ressource – Un moyen d’inclure les ressources dans votre application avec un support CRUDI complet (créer, lire, mettre à jour, supprimer, indexer).
  6. Tableau de données (grille) – Un moyen de rendre les données dans un format de tableau, y compris la pagination, le tri, etc.

Cliquez sur chacun de ces liens pour en savoir plus sur leur fonctionnement et comment en tirer le meilleur parti.

Application de démonstration

Si vous souhaitez une démonstration de toutes les fonctionnalités de ce module, vous pouvez jeter un œil à ceci Application de démonstration angulaireC’est le code derrière l’application hébergée suivante @ https://formio.github.io/angular-demo

Kit de démarrage d’application

Pour vous aider à utiliser cette bibliothèque, nous avons le Kit de démarrage d’application angulaire Référentiel pour vous aider à démarrer avec les meilleures pratiques d’utilisation de Form.io dans une application Angular. Vous pouvez essayer cette application en téléchargeant cette application, puis en suivant les étapes ci-dessous.

npm install
npm start

Documentation complète

Pour lire la documentation complète de cette bibliothèque, veuillez lire le Page Wiki

À propos de Form.io

Form.io est une plate-forme API combinée de gestion de formulaires et de données conçue pour les développeurs créant des applications «sans serveur» basées sur des formulaires. Form.io fournit un flux de travail de création de formulaire simple par glisser-déposer qui vous permet de créer rapidement et facilement des formulaires complexes pour les applications d’entreprise. Ces formulaires sont ensuite intégrés directement dans votre application avec une seule ligne de code qui restitue dynamiquement le formulaire (en utilisant Angular ou React) dans votre application tout en générant également l’API RESTful pour prendre en charge ces formulaires. La plateforme Form.io propose également de nombreux services tiers totalement intégrés dans le processus de création de formulaire. Cela vous permet d’étendre la puissance et les capacités de vos applications tout en économisant du temps et des efforts.

Vous pouvez utiliser ce moteur de rendu avec Form.io en pointant simplement src Paramètres de l’URL du formulaire. Par exemple, l’URL suivante pointe vers le schéma JSON d’un formulaire créé sur Form.io.

https://pjmfogrfqptslvi.form.io/test

Pour rendre ce formulaire, indiquez simplement cette URL <formio> Directive comme ça.

<formio src="https://pjmfogrfqptslvi.form.io/test"></formio>

Cela rend non seulement le formulaire, mais l’envoie également au point de terminaison d’API fourni.



Source link

Recent Posts