Nukem's Possible Manifestation

    @i-novation/ngx-rapidforms
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.5 • Public • Published

    Angular Rapidforms

    A framework to shrink down the effort that is needed to get a form up and running in angular. It helps you to minimize your boilerplate code you would have to write for each form in your application. Also there are templates provided to give your application a clean and uniform look as well as displaying the same error messages throughout all forms.

    What are the advantages?

    • minimized and clean code
    • minimize effort
    • easy to use
    • uniform design & error messages
    • better maintainability

    Whats's the point?

    Rapidforms utilizes you to create fast and simple forms for a simple way to interchange data. It is easy to use in new or existing projects. So you can use it besides known angular form techniques or completely rely on functions provided by this framework.

    Requirements

    Tested for versions of Angular >= 4.0. Compatible for npm >= 8

    Installation

    The recommended way of installing Rapidforms is to use npm. Therefore change to the root folder of your angular project and type

    npm install @i-novation/ngx-rapidforms

    and you are ready to go.

    This will install the framwork in the node_modules folder using the latest version published on npm.

    Usage

    First steps

    These steps will show you how to get up and running with the framework.

    Import the module into your application

    app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
     
    import { AppComponent } from './app.component';
    // Import the module
    import { RapidformsModule } from '@i-novation/ngx-rapidforms';
     
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        // Add it to the imports
        RapidformsModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

    Setting up a basic form

    1. Add a 'dynamicform' element to your desired Template file (e.g. app.component.html)
    <div>
        <h1>Page title</h1>
     
        <dynamicform></dynamicform>
    </div>
    1. Describe your form using an array
    formRows1DynamicFormRow[] = [
        new TextboxElement({
            key: "email",
            label: "Email",
            description: "Hint: This is also your username"
        }),
        new PasswordElement({
            key: "password",
            label: "Password"
        })
    ];
    1. Refer to the array in the HTML element
    <dynamicform [rows]="formRows1"></dynamicform>
    1. Add a action method
    public onSubmit(formFormGroup) 
    {
        console.log(form.controls.email.value);
    }

    You can refer to the element via their name you gave them as the key.

    1. Add that method to the HTML element
    <dynamicform [rows]="formRows1" [onSend]="onSubmit"></dynamicform>

    Add some validators

    The values of each field can be validated based on rules defined by validators. You can either use an already existing one, or write one yourself.

    formRows1DynamicFormRow[] = [
        new TextboxElement({
            key: "email",
            label: "Email",
            description: "Hint: This is also your username",
            validators: [new EmailValidator()]
        }),
        new PasswordElement({
            key: "password",
            label: "Password",
            validators: [new RequiredValidator(), new MaxLengthValidator(30), new MinLengthValidator(8)]
        })
    ];

    Add options to configure the form (optional)

    //...
    options1DynamicFormOptions = new DynamicFormOptions({
        title: "Login",
        summarizedErrorMessage: false,
        placeholders: true,
        primaryButtonText: "Absenden"
    });
    //...
    <dynamicform [rows]="formRows1" [onSend]="onSubmit" [options]="options1"></dynamicform>

    Field types

    component class usage
    text box TextboxElement.ts a regular text field
    radio button RadioElement.ts select one out of multiple values
    password PasswordElement.ts spezialized field for passwords
    textarea TextareaElement.ts multiline text field
    drop-down OptionElement.ts select one out of multiple values
    checkbox CheckboxElement.ts a regular checkbox
    custom html CustomElement.ts can be used to insert custom html into the form

    Structure and parameters

    Each predefined field has these attributes

    attribute standard value description
    value value of the field
    key unique key of the field (used to access values)
    label value of key displayed text (label or placeholder)
    controlType sets the html element that is used to display the field
    description '' a descriptive text that is displayed near the field
    classes '' add custom css classes to the field
    hasPlaceholders decides wether the html element has a placeholder property or not
    validators [] add validators to the field to check thier values against specific rules

    Special attributes

    • OptionElement.ts, options: {key, value}
    new OptionElement({
        key: "country",
        label: "Land",
        options: [
            { key: "germany", value: "Germany" },
            { key: "austria", value: "Austria" },
            { key: "switzerland", value: "Switzerland" }
        ]
    })
    • RadioElement.ts, options: {key, value}
    new RadioElement({
        key: "country",
        label: "Land",
        options: [
            { key: "germany", value: "Germany" },
            { key: "austria", value: "Austria" },
            { key: "switzerland", value: "Switzerland" }
        ]
    })

    Arrangement / Columns

    To place elements in one row, a DynamicFormElementGroup can be used. The correspondig css classes have to be added. It can also be used to structure the form.

    new DynamicFormElementGroup({
        fields: [
            new TextboxElement({
                key: "username",
                label: "Nutzername"
            }),
            new PasswordElement({
                key: "password",
                label: "Passwort"
            })
        ]
    });
     

    Validation

    If a validator offers a dynamic attribute it can be used in the error message.

    Each validator automatically has the dynamic attributes {attribute} und {value}.

    validator dynamic attributes usage
    BooleanValidator.ts {trueValue}, {falseValue} validates if the value has one of two allowed values
    EmailValidator.ts checks an e-mail
    IntegerValidator.ts checks for an integer
    IPValidator.ts validates based on an IPv4 IP adress
    MatchValidator.ts compares the value to the value of the field in the parameter
    MaxLengthValidator.ts {maxLength} checks if the value is longer than desired
    MinLengthValidator.ts {minLength} checks if the value is shorter than desired
    NumberValidator.ts checks a number (with seperators)
    RequiredValidator.ts checks if the field has a value
    UrlValidator.ts checks of the field is a formal valid URL

    Configuration

    Overview of the configuration array

    value standard value description
    title "" set the title of the form
    summarizedErrorMessage false should error messages be summarized
    placeholders false should placeholders be displayed instead of labels
    primaryButtonText "" sets the text of the submit button

    Example:

    //...
    options1DynamicFormOptions = new DynamicFormOptions({
        title: "Check-Out",
        summarizedErrorMessage: false,
        placeholders: true,
        primaryButtonText: "Submit"
    });
    //...

    Global configuration

    A global configuration can be set to be used for each form. If a option element is passed to a form, those values will be used to overwrite the standard values

        DynamicFormComponent.setDefaultOptions(this.options1);

    License

    The project is licensed under the MIT license.

    Keywords

    none

    Install

    npm i @i-novation/ngx-rapidforms

    DownloadsWeekly Downloads

    1

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    747 kB

    Total Files

    63

    Last publish

    Collaborators

    • andreaspopel
    • csigritz