# tk-form-input

> License: MIT

Latest version **0.0.1** (published 2021-08-11) · 0 weekly downloads

## Install

```sh
npm install tk-form-input
pnpm add tk-form-input
yarn add tk-form-input
bun add tk-form-input
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2021-08-11 |
| First published | 2021-08-11 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 74.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tkouchoanou |

## Links

- npm: https://www.npmjs.com/package/tk-form-input
- npm.io page: https://npm.io/package/tk-form-input

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.1.0

## Recent versions

- 0.0.1 (latest) — 2021-08-11
- 0.0.0 — 2021-08-11
- 0.0.0-watch — 2021-08-11

## README

#TkFormInput
License: MIT

### install requirements

```
npm i @angular/forms @angular/flex-layout
```
### how to use the phone input component ?
Only the PhoneInputComponent is available for this version
#### In your module
```
import { TkFormInputModule } from 'tk-form-input';
@NgModule({
imports: [TkFormInputModule]
})
```
## With ReactiveForm 
#### In your component typescript class
Don't forget to import ReactiveFormsModule
```
this.form = this.formBuilder.group({
phone : ['']
});
```
##### In your component html
bind correctly your control name with formControlName.
```
<phone-input  formControlName="phone"></phone-input>
```
## With template driven form
##### In your component html
```<phone-input [(ngModel)]="phone" name="phone"> </phone-input>```
> Remember that "phone" must be a property of your component class and you need to import FormsModule to use ngModel
## Use all options 
```
<phone-input [showKeyBoard]="false" [placeHolder]="'00567-857-678'" [groupDigitsBy]="3" [separateAfter]="4" [digitGroupSeparator]="'-'" [inputNgClass]="{'form-control':true}" ></phone-input>
```

---
_Source: https://npm.io/package/tk-form-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._