clean-form v0.2.3

CleanForm

The library aims to provided powerfull forms handling without a lot of configuration.

BE CAREFULL : This library is not ready yet, and some breaking changes are expected shortly. Please do not use in production.

Installation

In order to install this library in your project, you need to run this command :

npm install clean-form --save

Once installed, you can add it into your Angular project :

import { AppComponent } from './app.component'
import { CleanFormModule } from 'clean-form'

@NgModule({
  ...
  imports: [
    ...
    CleanFormModule.forRoot({}),
    ...
  ],
  ...
})
export class AppModule { }

Usage

Now, you can start to use clean-forminto your project. clean-form only works with Angular reactive forms, so you need to have the have something like that into your .ts file :

// some.component.ts
import { FormBuilder, FormGroup } from '@angular/forms'

export class SomeComponent implements OnInit {
  public myForm: FormGroup

  constructor(public formBuilder: FormBuilder) {
    this.myForm = this.formBuilder.group({
      demo: 'Value of the demo field',
    })
  }
}

Then you can use this into your html files :

<!-- some.component.html -->

<clean-input [form]="myForm" name="demo"></clean-input>

And that's it, you should be able to use a generic field. Each component has specifics options it could handles to provide custom behaviors to each field.

clean-input Component

// some.component.ts
...
import { InputOptions } from 'clean-form'

export class SomeComponent implements OnInit {
  ...
  public myOptions: InputOptions = {
    label: `My field`,
    icon: `edit`,
    hint: `My small hint`,
    validators: {
      required: true,
    },
  }
  ...
}

<!-- some.component.html -->

<clean-input [form]="myForm" name="demo" [options]="myOptions"></clean-input>

In this case, field have a label, an icon, a hint and a validator, which prevent user the leave this field empty. Validator's errors are handle by clean-input and displayed when needed. In your .ts file, you should be able to use this.myForm.value or this.myForm.valid to get info.

See all options

clean-textarea

You could use <clean-textarea ...> to provide to your application a textarea field. Usage is same as below:

<!-- some.component.html -->

<clean-textarea [form]="myForm" name="demo" [options]="myOptions"></clean-textarea>

See all options

clean-select

You could use <clean-select ...> to provide to your application a select. In addition, you have to provide an array with data you want to select.

// some.component.ts
...
export class SomeComponent implements OnInit {
  ...
  choices: string[] = ['Choice 1', 'Choice 2', 'Choice 3',]
  ...
}

<!-- some.component.html -->

<clean-select [form]="myForm" name="demo" [options]="myOptions" [choices]="choices"></clean-select>

See all options

clean-swicth

You could use <clean-switch ...> to provide to your application a switch field wich handles true and false value. You could provide to your switch component a label and a reversedLabel. label is shown if switch is enable and reverseLabel if it isn't. If no reverseLabel is provided, label is shown everywhere.

// some.component.ts
...
import { SwitchOptions } from 'clean-form'

export class SomeComponent implements OnInit {
  ...
  public myOptions: SwitchOptions = {
    label: `My field is enable`,
    reversedLabel: `My field is disabled`,
  }
  ...
}

<!-- some.component.html -->

<clean-switch [form]="myForm" name="demo" [options]="myOptions"></clean-switch>

See all options

Options

Input options

Autocomplete options

Mask options

Validators options