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

| Name | Type | Default | Description | | --------------------------- | ---------------------- | -------- | ----------------------------------------------------------------------- | | label | string | '' | Label which is displayed on top of input | | hint | string | '' | A small hint displayed below the input | | icon | string | '' | A material icon displayed on right | | type | string | 'text' | HTML input type | | autocomplete | AutocompleteOptions | {} | See autocomplete options | | mask | MaskOptions | {} | See mask options | | validators | ValidatorsOptions | {} | See validator options | | errorMessages | ErrorMessagesOptions | {} | See errorMessages options | | enableMaxlength | boolean | false | Display or not the actuel legnth of field and the max value it could be | | enableDefaultAutocomplete | boolean | false | Enable default browsers autocompletion | | enableValidColor | boolean | true | When input is filled and valid, display a color | | enableErrorColor | boolean | true | When input is dirty and invalid, display a color | | enableEraseButton | boolean | true | Enable an erase button to erase all input content |

Autocomplete options

| Name | Type | Default | Description | | ----------------------------- | ---------- | ------- | ------------------------------------------------------ | | suggestions[] | string[] | [] | List of all suggestions | | hideSuggestionsOnMouseLeave | boolean | true | Hide suggestions when user leave the field | | hideSuggestionsTime | number | 500 | Time in ms before hiding suggestions | | enableShowOnClick | boolean | true | Display suggestions on click whenever there is no text | | maxShown | number | 50 | Max suggestions show in the same time |

Mask options

| Name | Type | Default | Description | | ------------------- | --------- | ------- | ---------------------------------------- | | value | string | [] | Mask definition | | keepMask | boolean | false | Keep mask in model value | | suffix | string | null | A suffix added to the mask | | keepSuffix | boolean | false | Keep suffix in model value | | alwaysSuffix | boolean | false | Display suffix even if there is no value | | prefix | string | null | A prefix added to the mask | | keepPrefix | boolean | false | Keep prefix in model value | | alwaysPrefix | boolean | false | Display prefix even if there is no value | | thousandSeparator | string | | Separator char for thousands in number | | decimalSeparator | string | . | Separator char for decimal | | canBeNegative | boolean | true | Number values can be negative |

Validators options

| Name | Type | Default | Description | | ------------- | --------- | ------- | ------------------------------------------------------------ | | required | boolean | null | Field value have to be filled | | pattern | string | null | Field value have to match the regex | | maxlength | number | null | Field value have to have length smaller than specifed length | | minlength | number | null | Field value have to have length bigger than specifed length | | maxvalue | number | null | Field value have to be smaller than specifed size | | minvalue | number | null | Field value have to be bigger than specifed size |