special-forms 3.2.1 → 3.2.2
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 +136 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,24 +1,147 @@
|
|
|
1
|
-
|
|
1
|
+
<h1 align="center">Welcome to special-forms 👋</h1>
|
|
2
|
+
<p>
|
|
3
|
+
<a href="https://www.npmjs.com/package/special-forms" target="_blank">
|
|
4
|
+
<img alt="Version" src="https://img.shields.io/npm/v/special-forms.svg">
|
|
5
|
+
</a>
|
|
6
|
+
</p>
|
|
2
7
|
|
|
3
|
-
|
|
8
|
+
> Angular library to create complex forms with a simple config object.
|
|
4
9
|
|
|
5
|
-
|
|
10
|
+
### 🏠 [Homepage](https://gitlab.com/lopezsantiago/special-forms)
|
|
6
11
|
|
|
7
|
-
|
|
8
|
-
> Note: Don't forget to add `--project special-forms` or else it will be added to the default project in your `angular.json` file.
|
|
12
|
+
## Install
|
|
9
13
|
|
|
10
|
-
|
|
14
|
+
```sh
|
|
15
|
+
yarn add special-forms
|
|
16
|
+
```
|
|
11
17
|
|
|
12
|
-
|
|
18
|
+
## Author
|
|
13
19
|
|
|
14
|
-
|
|
20
|
+
👤 **Santiago López**
|
|
15
21
|
|
|
16
|
-
|
|
22
|
+
- Github: [@LopezSantiago](https://github.com/LopezSantiago)
|
|
23
|
+
- LinkedIn: [@https:\/\/www.linkedin.com\/in\/lopezsantiagowebui\/](https://linkedin.com/in/https://www.linkedin.com/in/lopezsantiagowebui/)
|
|
17
24
|
|
|
18
|
-
##
|
|
25
|
+
## Instructions
|
|
19
26
|
|
|
20
|
-
|
|
27
|
+
```typeScript
|
|
28
|
+
import { SpecialFormModule } from 'special-forms';
|
|
21
29
|
|
|
22
|
-
|
|
30
|
+
@NgModule({
|
|
31
|
+
...
|
|
32
|
+
imports: [
|
|
33
|
+
SpecialFormModule
|
|
34
|
+
],
|
|
35
|
+
...
|
|
36
|
+
})
|
|
37
|
+
```
|
|
23
38
|
|
|
24
|
-
|
|
39
|
+
In the component
|
|
40
|
+
|
|
41
|
+
```typeScript
|
|
42
|
+
import { SpecialFormBuilderService } from 'special-forms';
|
|
43
|
+
@Component({
|
|
44
|
+
...
|
|
45
|
+
})
|
|
46
|
+
export class SomeComponent implements OnInit {
|
|
47
|
+
|
|
48
|
+
constructor(private specialBuilder: SpecialFormBuilderService) {}
|
|
49
|
+
|
|
50
|
+
form = this.specialBuilder.group({
|
|
51
|
+
test: {
|
|
52
|
+
type: EControlTypes.input,
|
|
53
|
+
label: 'Esto es una prueba',
|
|
54
|
+
placeholder: 'Un placeholder',
|
|
55
|
+
},
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
To create a new Form only pass the config Object
|
|
62
|
+
|
|
63
|
+
```typeScript
|
|
64
|
+
interface {
|
|
65
|
+
placeholder?: string;
|
|
66
|
+
label?: string;
|
|
67
|
+
tooltip?: string;
|
|
68
|
+
icon?: string;
|
|
69
|
+
elementId?: string;
|
|
70
|
+
styleClasses?: string;
|
|
71
|
+
length?: number;
|
|
72
|
+
required?: boolean;
|
|
73
|
+
hidden?: boolean;
|
|
74
|
+
readOnly?: boolean;
|
|
75
|
+
disabled?:boolean;
|
|
76
|
+
errorMessages?: { [key: string]: string };
|
|
77
|
+
validators?: ValidatorFn | ValidatorFn[] | null;
|
|
78
|
+
asyncValidators?: AsyncValidatorFn | AsyncValidatorFn[] | null;
|
|
79
|
+
defaultValue?: any;
|
|
80
|
+
settings: //depends of the type of control selected;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
enum EControlTypes {
|
|
84
|
+
pkey = 'PRIMARY-KEY',
|
|
85
|
+
input = 'INPUT',
|
|
86
|
+
richText = 'RICH-TEXT',
|
|
87
|
+
textArea = 'TEXT-AREA',
|
|
88
|
+
dropdown = 'DROPDOWN',
|
|
89
|
+
date = 'DATE',
|
|
90
|
+
time = 'TIME',
|
|
91
|
+
checkbox = 'CHECKBOX',
|
|
92
|
+
upload = 'UPLOAD',
|
|
93
|
+
autocomplete = 'AUTOCOMPLETE',
|
|
94
|
+
multiple = 'MULTIPLE-AUTOCOMPLETE',
|
|
95
|
+
array = 'ARRAY',
|
|
96
|
+
form = 'FORM',
|
|
97
|
+
label = 'LABEL',
|
|
98
|
+
default = 'DEFAULT',
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
```
|
|
102
|
+
Example
|
|
103
|
+
|
|
104
|
+
```typeScript
|
|
105
|
+
form = this.specialBuilder.group({
|
|
106
|
+
name: {
|
|
107
|
+
type: EControlTypes.input,
|
|
108
|
+
label: 'Name',
|
|
109
|
+
placeholder: 'Write your first name',
|
|
110
|
+
validators:[Validators.maxLength(20)],
|
|
111
|
+
defaultValue:'Jhon Doe',
|
|
112
|
+
disabled:false,
|
|
113
|
+
elementId:'name-input',
|
|
114
|
+
errorMessages:{
|
|
115
|
+
maxLength:'The maximum length is 20'
|
|
116
|
+
},
|
|
117
|
+
required:true,
|
|
118
|
+
type: EControlTypes.input,
|
|
119
|
+
},
|
|
120
|
+
});
|
|
121
|
+
```
|
|
122
|
+
Finally you can pass the form object to the component.
|
|
123
|
+
|
|
124
|
+
```HTML
|
|
125
|
+
<sp-form [control]="form"></sp-form>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
To the correct functionality of the library, need to install the next libraries
|
|
129
|
+
|
|
130
|
+
```JSON
|
|
131
|
+
"tailwindcss": "^3.2.7",
|
|
132
|
+
"autoprefixer": "^10.4.13",
|
|
133
|
+
"postcss": "^8.4.21",
|
|
134
|
+
"@ngneat/input-mask": "6.1.0",
|
|
135
|
+
"inputmask": "^5.0.7",
|
|
136
|
+
"ngx-dropzone": "^3.1.0",
|
|
137
|
+
"ngx-editor": "^15.2.0",
|
|
138
|
+
"@angular/material": "15.1.5"
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
## Show your support
|
|
142
|
+
|
|
143
|
+
Give a ⭐️ if this project helped you!
|
|
144
|
+
|
|
145
|
+
---
|
|
146
|
+
|
|
147
|
+
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
|