lit-ng-form v1.1.0

LIT FORM NG

A Lit Element library to semplify the use of forms in the Angular way.

Introduction

Working with forms can be a very tedious task of our work. Even the simplest application can quickly become overwhelming, causing us to lose control over the communication flow between states and events. If you are familiar with Angular forms, then you'll be just fine.

Features

• FormArray | FormGroup | FormControl
• Two Way Bindings
• Async Validators and Custom Async Validators

Future implementations

• FormBuilder
• Custom Accessors

Note

Since each control (FormGroup | FormArray | FormControl) extend an AbstractControl, they share the same properties and methods.

Properties

Properties (FormGroup)

Properties (FormArray)

Properties (FormControl)

Methods

Methods (FormArray)

How to use

@customElement('my-form')
export class MyForm extends LitElement {

    private form: FormGroup = new FormGroup(this, {
        name: new FormControl(this, 'Carlo', [ Validators.required ]),
        age: new FormControl(this, 34, [ Validators.required ]),
    });

    private onSubmit(event: Event): void {
        event.preventDefault();
        if (this.form.invalid) return;
        console.log(this.form.value);
    }

    protected render(): TemplateResult {
        return html`
            <form @submit="${this.onSubmit}">
                <div>
                    <label>Name:</label>
                    <input type="text" ${this.form.connect('name')}>
                    ${this.form.get('name')?.errors?.required ? html`<small>Required field</small>` : html``}
                </div>
                <div>
                    <label>Age:</label>
                    <input type="number" ${this.form.connect('age')}>
                    ${this.form.get('age')?.errors?.required ? html`<small>Required field</small>` : html``}
                </div>
                <button type="submit" ?disabled="${this.form.invalid}">SUBMIT</button>
            </form>
        `;
    }

}