@olafi-moon/make-the-job NPM

This library aims to facilitate the formatting of inputs in angular. It is still being developed and is in a trial version.

What's New

Format in inputs

Use appropriate version based on your Angular version.

Angular 9
>= `v^9.1.13`

Browser Support

Chrome	Firefox	IE / Edge	Safari	Opera
Latest ✔	Latest ✔	IE11, Edge ✔	Latest ✔	Latest ✔

Features

Format input with directives

Demo

In development

StackBlitz Demo

In development

Installation

MakeTheJob is available via npm

Using npm:

$ npm i @olafi-moon/make-for-me

Using yarn: (no version)

Using angular-cli: (no version)

Usage

Import MakethejobModule in the root module(AppModule):

import { MakeTheJobModule } from '@olafi-moon/make-for-me';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

Now use in your template

<form class="form-format">
  <fieldset>
    <legend>Format Inputs With AlefFormat</legend>
    <p>
      <label for="cep">CEP</label><br/>
      <input alefCepFormat type="text" name="cep" id="cep"/>
    </p>
    <p>
      <label for="cnpj">CNPJ</label><br/>
      <input alefCnpjFormat type="text" name="cnpj" id="cnpj"/>
    </p>
    <p>
      <label for="date">Date</label><br/>
      <input alefDateFormat type="text" name="date" id="date"/>
    </p>
    <p>
      <label for="date-dashers">Date with dashers</label><br/>
      <input alefDateWithDashersFormat type="text" name="date-dashers" id="date-dashers"/>
    </p>
    <p>
      <label for="paste-lock">Paste lock</label><br/>
      <input alefPastLock type="text" name="paste-lock" id="paste-lock"/>
    </p>
    <p>
      <label for="money">Money</label><br/>
      <input alefMoneyFormat type="text" name="money" id="money"/>
    </p>
    <p>
      <label for="phone-ddi">Phone DDI</label><br/>
      <input alefPhoneDDIFormat type="text" name="phone-ddi" id="phone-ddi"/>
    </p>
    <p>
      <label for="phone">Phone</label><br/>
      <input alefPhoneFormat type="text" name="phone" id="phone"/>
    </p>
    <p>
      <label for="pis">Pis</label><br/>
      <input alefPisFormat type="text" name="pis" id="pis"/>
    </p>
  </fieldset>
</form>

See Demo