Rxcomp-form NPM

💎 RxComp FormModule

RxComp FormModule is a Reactive Form Module for RxComp library

RxComp is a reactive component library built on top of RxJs that mimics the Angular declarative syntax.

If you like Angular declarative syntax but you just want go Vanilla, RxComp library come in useful.

lib & dependancy	size
rxcomp-form.min.js
rxcomp-form.min.js
rxcomp.min.js
rxcomp.min.js
rxjs.min.js
rxjs.min.js

RxComp Form Demo
RxComp Form Api
RxComp Form Codepen

What is included

Models
FormControl, FormGroup, FormArray
Directives
FormInput, FormTextarea, FormSelect, FormCheckbox, FormRadio, FormSubmit
Validators
EmailValidator, MaxLengthValidator, MaxValidator, MinLengthValidator, MinValidator, NullValidator, PatternValidator, RequiredTrueValidator, RequiredValidator

Installation and Usage

ES6 via npm

This library depend on RxComp and RxJs
install via npm or include via script

npm install rxjs rxcomp rxcomp-form --save

CDN

For CDN, you can use unpkg

<script src="https://unpkg.com/rxjs@6.6.2/bundles/rxjs.umd.min.js"></script>  
<script src="https://unpkg.com/rxcomp@1.0.0-beta.18/dist/umd/rxcomp.min.js"></script>  
<script src="https://unpkg.com/rxcomp-form@1.0.0-beta.18/dist/umd/rxcomp-form.min.js"></script>

The global namespace for RxComp is rxcomp

import { CoreModule, Module } from 'rxcomp';

The global namespace for RxComp FormModule is rxcomp.form

import { FormModule } from 'rxcomp-form';

Bootstrapping Module

import { Browser, CoreModule, Module } from 'rxcomp';
import { FormModule } from 'rxcomp-form';
import AppComponent from './app.component';

export default class AppModule extends Module {}

AppModule.meta = {
    imports: [
        CoreModule,
        FormModule
    ],
    declarations: [],
    bootstrap: AppComponent,
};

Browser.bootstrap(AppModule);

Reactive Form Definition

import { Component } from 'rxcomp';
import { FormArray, FormGroup, RequiredValidator } from 'rxcomp-form';

export default class AppComponent extends Component {

    onInit() {
        const form = new FormGroup({
            firstName: null,
            lastName: null,
            email: null,
            country: null,
            evaluate: null,
            privacy: null,
            items: new FormArray([null, null, null], RequiredValidator()),
        });

        /*
        form.patch({
            firstName: 'Jhon',
            lastName: 'Appleseed',
            email: 'jhonappleseed@gmail.com',
            country: 'en-US'
        });
        */

        form.changes$.subscribe((changes) => {
            this.pushChanges();
        });

        this.form = form;
    }

    onSubmit() {
        if (this.form.valid) {
            this.form.submitted = true;
            // this.form.reset();
        }
    }

}

AppComponent.meta = {
    selector: '[app-component]',
};

Declarative Syntax

<form [formGroup]="form" (submit)="onSubmit()" name="form" role="form" novalidate autocomplete="off">
    <input type="text" formControlName="firstName" placeholder="firstName" />
    <input type="text" formControlName="lastName" placeholder="lastName" />
    <button type="submit" [class]="{ submitted: form.submitted }">Submit</button>
</form>