lc-forms v0.0.1

lc-forms by @LakeCodes

Is a library for simplified object-based creation and validation of forms in Angular/Angular Universal. The library is inspired by angular.io dynamic forms and Filip Lauc's angular2-easy-forms.

Documentation

1. Setup
2. Elements
3. Validation
4. Events
5. Settings

Setup

You can install the library from npm with the following command:

npm install --save lc-forms

Import the LCFormsModule into app.module or parent module.

@NgModule({
    imports: [
        BrowserModule,
        LCFormsModule
    ],
    providers: [],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

Usage

Define a list of elements as well as a settings and classes object if required and pass it to the component.

@Component({
    selector: 'app',
    template: `
        <lc-form [lcFormData]="data" (onSubmit)="onSubmit($event)" (onChanges)="onChanges($event)"></lc-form>
    `
})
export class AppComponent {
    constructor() {}

    public data = { // form object and configuration
        settings: {
            submitButtonText: 'Send',
        },
        classes: {
            form: 'some-class',
            submit: ['class-one', 'class-two']
        },
        elements: [
            {
                type: 'text',
                key: 'firstName',
                value: 'John Doe',
                label: 'First Name',
                validation: [
                    {type: 'required'},
                    {type: 'minLength', value: 5, message: 'Please enter a name longer then 5 characters'},
                    {type: 'pattern', value: '^[a-zA-Z ]+$', message: 'Only letters and spaces are allowed'}
                ]
            },
            {
                type: 'password',
                key: 'password',
                label: 'Password',
                validation: [
                    {type: 'required'},
                    {type: 'custom', value: startsWithNumber, message: 'Please dont start with a number'}
                ]
            },
            {
                type: 'dropdown',
                key: 'address',
                label: 'Address',
                value: 'osijek',
                order: 2,
                options: [
                    {value: 'osijek', name: 'Osijek'},
                    {value: 'zagreb', name: 'Zagreb'}
                ]
            },
            {
                type: 'radio',
                key: 'gender',
                label: 'Gender',
                value: 'male',
                classes: {
                    'wrapper': 'some-class-for-the-wrapper',
                    'label': 'label-class',
                    'element': ['q-class-one', 'q-class-two'],
                    'error': ['error-one', 'error-two']
                },
                options: [
                    {value: 'male', name: 'Male'},
                    {value: 'female', name: 'Female'}
                ]
            },
            {
                type: 'checkbox',
                key: 'things',
                label: 'Things You Like',
                values: ['pokemon', 'starWars'],
                options: [
                    {value: 'starWars', name: 'Star Wars'},
                    {value: 'batlefield', name: 'Batlefield'},
                    {value: 'pokemon', name: 'Pokemon'}
                ],
                validation: [
                    {type: 'required'}
                ]
            }
        ]
    };

    onSubmit(event) {
        console.log(event)
    }

    onChanges(event) {
        console.log(event)
    }
}

Elements

Each element can have the following properties:

Each element can also have a classes object with the following properties:

If you define the type of element to be radio, checkbox or dropdown then you need to define an additional property:

Example

{
    type: 'radio',
    key: 'gender',
    label: 'Gender',
    value: 'male',
    classes: {
        'wrapper': 'some-class-for-the-wrapper',
        'label': 'label-class',
        'element': ['q-class-one', 'q-class-two'],
        'error': ['error-one', 'error-two']
    }
    options: [
        {value: 'male', name: 'Male'},
        {value: 'female', name: 'Female'}
    ]
}

Validation

You can optionally set a validation property on any element. The submit button of the form will be disabled if any element is invalid.

The validation property is an object array with the following format:

{
    type: 'required' | 'minLength' | 'maxLength' | 'pattern' | 'match',
    value: string | int | function 
    message: string
}

The message property is the error message and its optional. Don't add the message property if you don't want to display an error message.

Here are the type properties and there associated values

Events

There are two events you can bind to:

• onSubmit
• onChange

This is how you bind to them:

<lc-form [lcFormData]="data" (onSubmit)="fooFunction($event)" (onChanges)="barFunction($event)"></lc-form>

onSubmit

The onSubmit event emits when the submit button is pressed. The emitted object contains all of the forms elements with their corresponding values obj[key] = value. If the elements type is 'checkbox' the emitted value is an array of all the checked

OnChange

The onChange event emits when ever a value changes. The following is what gets emitted: {[key]: value}. You can disable a element from triggering the onChange event by setting the emitChanges property to false.

Settings

Along with the list of elements you can add a settings object to the passed data. Here are the possible options:

You can also provide a classes object to add classes to the form wrapper and the submit wrapper:

classes: {
    // If you want to add a single class pass a string
    // If you want to add multiple classes pass an array os class names
    form: string | string[]
    submit: string | string[]
}