kwikid-forms 0.0.0-watch → 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +170 -20
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,39 +1,189 @@
|
|
|
1
1
|
## kwikid-forms
|
|
2
|
+
[](https://www.npmjs.com/package/kwikid-forms)
|
|
3
|
+
|
|
4
|
+
A fully customizable, one-time password input component for the web built with Angular.
|
|
5
|
+
|
|
6
|
+
|
|
2
7
|
|
|
3
|
-
## Installation
|
|
4
8
|
|
|
9
|
+
<a href="https://code-farmz.github.io/kwikid-forms" target="_blank">Demo</a>
|
|
10
|
+
|
|
11
|
+
<a href="https://stackblitz.com/github/code-farmz/kwikid-forms" target="_blank">Edit on Stackbliz</a>
|
|
12
|
+
## Installation
|
|
5
13
|
```
|
|
6
14
|
npm install --save kwikid-forms
|
|
7
15
|
```
|
|
8
|
-
|
|
9
16
|
## Usage
|
|
17
|
+
Add KwikidFormBuilderModule to imports `app.module.ts` something like
|
|
18
|
+
|
|
19
|
+
import { BrowserModule } from '@angular/platform-browser';
|
|
20
|
+
import { NgModule } from '@angular/core';
|
|
21
|
+
import { AppComponent } from './app.component';
|
|
22
|
+
import { KwikidFormBuilderModule } from 'kwikid-forms';
|
|
23
|
+
|
|
24
|
+
@NgModule({
|
|
25
|
+
declarations: [AppComponent],
|
|
26
|
+
imports: [ BrowserModule,
|
|
27
|
+
KwikidFormBuilderModule],
|
|
28
|
+
bootstrap: [AppComponent]
|
|
29
|
+
})
|
|
30
|
+
|
|
31
|
+
Add component to your page:
|
|
32
|
+
|
|
10
33
|
|
|
11
|
-
Add KwikIDFormsModule to imports `app.module.ts` something like
|
|
12
34
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
35
|
+
<kwikid-forms (onInputChange)="onOtpChange($event)" [config]="{length:5}"></kwikid-forms>
|
|
36
|
+
|
|
37
|
+
## API
|
|
38
|
+
|
|
39
|
+
<table>
|
|
40
|
+
<tr>
|
|
41
|
+
<th>Name</th>
|
|
42
|
+
<th>Type</th>
|
|
43
|
+
<th>Required</th>
|
|
44
|
+
<th>default</th>
|
|
45
|
+
<th>Description</th>
|
|
46
|
+
</tr>
|
|
47
|
+
<tr>
|
|
48
|
+
<td>config</td>
|
|
49
|
+
<td>object</td>
|
|
50
|
+
<td>true</td>
|
|
51
|
+
<td>{length:4}</td>
|
|
52
|
+
<td>Various configuration options to customize the component</td>
|
|
53
|
+
</tr>
|
|
54
|
+
<tr>
|
|
55
|
+
<td>onOtpChange</td>
|
|
56
|
+
<td>function</td>
|
|
57
|
+
<td>true</td>
|
|
58
|
+
<td>--</td>
|
|
59
|
+
<td>Function that will receive the otp</td>
|
|
60
|
+
</tr>
|
|
61
|
+
<tr>
|
|
62
|
+
<td>setValue</td>
|
|
63
|
+
<td>function</td>
|
|
64
|
+
<td>false</td>
|
|
65
|
+
<td>--</td>
|
|
66
|
+
<td>Call setValue method of component to update component value. See example below</td>
|
|
67
|
+
</tr>
|
|
68
|
+
</table>
|
|
69
|
+
|
|
70
|
+
<u>**Config options**</u>
|
|
71
|
+
<table>
|
|
72
|
+
<tr>
|
|
73
|
+
<th>Name</th>
|
|
74
|
+
<th>Type</th>
|
|
75
|
+
<th>Required</th>
|
|
76
|
+
<th>default</th>
|
|
77
|
+
<th>Description</th>
|
|
78
|
+
</tr>
|
|
79
|
+
<tr>
|
|
80
|
+
<td>length</td>
|
|
81
|
+
<td>number</td>
|
|
82
|
+
<td>true</td>
|
|
83
|
+
<td>4</td>
|
|
84
|
+
<td>Number of OTP inputs to be rendered.</td>
|
|
85
|
+
</tr>
|
|
86
|
+
<tr>
|
|
87
|
+
<td>inputStyles</td>
|
|
88
|
+
<td>object</td>
|
|
89
|
+
<td>false</td>
|
|
90
|
+
<td>--</td>
|
|
91
|
+
<td>Style applied to each input.Check https://angular.io/api/common/NgStyle for more info.</td>
|
|
92
|
+
</tr>
|
|
93
|
+
<tr>
|
|
94
|
+
<td>inputClass</td>
|
|
95
|
+
<td>string</td>
|
|
96
|
+
<td>false</td>
|
|
97
|
+
<td>--</td>
|
|
98
|
+
<td>Class applied to each input.</td>
|
|
99
|
+
</tr>
|
|
100
|
+
<tr>
|
|
101
|
+
<td>containerClass</td>
|
|
102
|
+
<td>string</td>
|
|
103
|
+
<td>false</td>
|
|
104
|
+
<td>--</td>
|
|
105
|
+
<td>Class applied to container element.</td>
|
|
106
|
+
</tr>
|
|
107
|
+
<tr>
|
|
108
|
+
<td>containerStyles</td>
|
|
109
|
+
<td>object</td>
|
|
110
|
+
<td>false</td>
|
|
111
|
+
<td>--</td>
|
|
112
|
+
<td>Style applied to container element.Check https://angular.io/api/common/NgStyle for more info.</td>
|
|
113
|
+
</tr>
|
|
114
|
+
<tr>
|
|
115
|
+
<tr>
|
|
116
|
+
<td>allowNumbersOnly</td>
|
|
117
|
+
<td>bool</td>
|
|
118
|
+
<td>false</td>
|
|
119
|
+
<td>--</td>
|
|
120
|
+
<td>set true to allow only numbers as input</td>
|
|
121
|
+
</tr>
|
|
122
|
+
<td>allowKeyCodes</td>
|
|
123
|
+
<td>string[]</td>
|
|
124
|
+
<td>false</td>
|
|
125
|
+
<td>--</td>
|
|
126
|
+
<td>By default numbers alphabets and _ - are allowed.Y
|
|
127
|
+
ou can define other key codes if needed.</td>
|
|
128
|
+
</tr>
|
|
129
|
+
<tr>
|
|
130
|
+
<td>isPasswordInput</td>
|
|
131
|
+
<td>bool</td>
|
|
132
|
+
<td>false</td>
|
|
133
|
+
<td>--</td>
|
|
134
|
+
<td>set true for password type input</td>
|
|
135
|
+
</tr>
|
|
136
|
+
<tr>
|
|
137
|
+
<td>disableAutoFocus</td>
|
|
138
|
+
<td>bool</td>
|
|
139
|
+
<td>false</td>
|
|
140
|
+
<td>--</td>
|
|
141
|
+
<td>First input will be auto focused on component load and to next empty input on setValue excecution.Set this flag to true to prevent this behaviour</td>
|
|
142
|
+
</tr>
|
|
143
|
+
<tr>
|
|
144
|
+
<td>placeholder</td>
|
|
145
|
+
<td>string</td>
|
|
146
|
+
<td>false</td>
|
|
147
|
+
<td>--</td>
|
|
148
|
+
<td>input placeholder</td>
|
|
149
|
+
</tr>
|
|
150
|
+
<tr>
|
|
151
|
+
<td>letterCase</td>
|
|
152
|
+
<td>string</td>
|
|
153
|
+
<td>--</td>
|
|
154
|
+
<td>--</td>
|
|
155
|
+
<td>Set value to Upper or Lower to change the otp to upper case or lower case</td>
|
|
156
|
+
</tr>
|
|
157
|
+
</table>
|
|
158
|
+
|
|
159
|
+
<u>**Updating component value using setValue method**</u>
|
|
160
|
+
|
|
161
|
+
Component value can be updated using `setValue` method of the component example:-
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
```<kwikid-forms #ngOtpInput ></kwikid-forms> //add hash to kwikid-forms component```
|
|
165
|
+
|
|
166
|
+
then in your component reference using [@ViewChild](https://angular.io/api/core/ViewChild) and call `setValue` method when you want to set the value of component like
|
|
18
167
|
|
|
19
|
-
@NgModule({
|
|
20
|
-
declarations: [AppComponent],
|
|
21
|
-
imports: [BrowserModule, KwikIDFormsModule],
|
|
22
|
-
bootstrap: [AppComponent]
|
|
23
|
-
})
|
|
24
168
|
```
|
|
169
|
+
//Get reference using ViewChild and the specified hash
|
|
170
|
+
@ViewChild('ngOtpInput') ngOtpInputRef:any;
|
|
25
171
|
|
|
26
|
-
|
|
172
|
+
yourMethod(){
|
|
173
|
+
this.ngOtpInputRef.setValue(yourValue);
|
|
174
|
+
//yourvalue can be any string or number
|
|
175
|
+
}
|
|
27
176
|
|
|
28
|
-
```html
|
|
29
|
-
<kwikid-forms></kwikid-forms>
|
|
30
177
|
```
|
|
31
178
|
|
|
32
|
-
|
|
179
|
+
<u>**Disable inputs**</u>
|
|
180
|
+
|
|
181
|
+
Inputs can be disabled by getting the otp form instance of the component and calling disable method
|
|
33
182
|
|
|
34
|
-
|
|
183
|
+
1.Get the component ref in the same way as done in SetValue method above
|
|
184
|
+
2.Call disable method of otpForm as follow
|
|
35
185
|
|
|
36
|
-
|
|
186
|
+
``` this.ngOtpInputRef.otpForm.disable(); ```
|
|
37
187
|
|
|
38
188
|
## License
|
|
39
189
|
|
|
@@ -41,4 +191,4 @@ Code - [link](https://docs.getkwikid.com:7072/kwikid-forms/code/)
|
|
|
41
191
|
|
|
42
192
|
## Contributing
|
|
43
193
|
|
|
44
|
-
Add a star to show your support and feel free to open [pull requests](https://
|
|
194
|
+
Add a star to show your support and feel free to open [issues](https://github.com/code-farmz/kwikid-forms/issues/new) and [pull requests](https://github.com/code-farmz/kwikid-forms/compare)!
|