@libs-ui/components-inputs-valid 0.2.355-13 → 0.2.355-15
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 +157 -2
- package/package.json +10 -10
package/README.md
CHANGED
|
@@ -1,3 +1,158 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Valid Input Component
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
`@libs-ui/components-inputs-valid` là một component cấp cao (high-level component) kết hợp giữa nhãn (label), ô nhập liệu (input) và cơ chế kiểm tra tính hợp lệ (validation). Nó giúp đơn giản hóa việc xây dựng các biểu mẫu (forms) bằng cách tự động quản lý trạng thái lỗi và hiển thị thông báo.
|
|
4
|
+
|
|
5
|
+
## Tính năng nổi bật
|
|
6
|
+
|
|
7
|
+
- 🔗 **Auto Binding**: Liên kết trực tiếp với một trường dữ liệu trong đối tượng thông qua `fieldNameBind`.
|
|
8
|
+
- 🏷️ **Integrated Label**: Tích hợp sẵn `LibsUiComponentsLabelComponent` với đầy đủ tính năng (required mark, description, popover, buttons).
|
|
9
|
+
- ✅ **Comprehensive Validation**: Hỗ trợ nhiều loại kiểm tra:
|
|
10
|
+
- `validRequired`: Bắt buộc nhập.
|
|
11
|
+
- `validMinLength` / `validMaxLength`: Độ dài chuỗi.
|
|
12
|
+
- `validMinValue` / `validMaxValue`: Giá trị số.
|
|
13
|
+
- `validPattern`: Kiểm tra theo biểu thức chính quy (Regex).
|
|
14
|
+
- `functionValid`: Hàm kiểm tra tùy chỉnh (hỗ trợ Async).
|
|
15
|
+
- 🧩 **Flexible Layout**:
|
|
16
|
+
- Hỗ trợ đơn vị (units) bên trái và bên phải.
|
|
17
|
+
- Chế độ chọn nhanh (Radio/Checkbox) tích hợp.
|
|
18
|
+
- Hỗ trợ căn chỉnh `baseline` cho các bố cục phức tạp.
|
|
19
|
+
- ⏱️ **Debounced Validation**: Khả năng trì hoãn việc kiểm tra (`debounceTimeValidate`) để tối ưu hiệu năng.
|
|
20
|
+
- 🛠️ **Full Control**: Cung cấp các hàm điều khiển như `checkIsValid()`, `setMessageError()`, `focus()`, `blur()`...
|
|
21
|
+
|
|
22
|
+
## Cài đặt
|
|
23
|
+
|
|
24
|
+
Sử dụng npm hoặc yarn để cài đặt:
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm install @libs-ui/components-inputs-valid
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Cách sử dụng
|
|
31
|
+
|
|
32
|
+
### Import Module
|
|
33
|
+
|
|
34
|
+
```typescript
|
|
35
|
+
import { LibsUiComponentsInputsValidComponent } from '@libs-ui/components-inputs-valid';
|
|
36
|
+
|
|
37
|
+
@Component({
|
|
38
|
+
standalone: true,
|
|
39
|
+
imports: [LibsUiComponentsInputsValidComponent],
|
|
40
|
+
// ...
|
|
41
|
+
})
|
|
42
|
+
export class YourComponent {}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Ví dụ cơ bản (Bắt buộc nhập và Kiểm tra độ dài)
|
|
46
|
+
|
|
47
|
+
```html
|
|
48
|
+
<libs_ui-components-inputs-input-valid
|
|
49
|
+
[(item)]="userData"
|
|
50
|
+
[fieldNameBind]="'username'"
|
|
51
|
+
[labelConfig]="{ labelLeft: 'Tên đăng nhập', required: true }"
|
|
52
|
+
[validRequired]="{ isRequired: true, message: 'Vui lòng nhập tên đăng nhập' }"
|
|
53
|
+
[validMinLength]="{ length: 5, message: 'Tối thiểu 5 ký tự' }"></libs_ui-components-inputs-input-valid>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### Kiểm tra Regex và Hàm tùy chỉnh
|
|
57
|
+
|
|
58
|
+
```html
|
|
59
|
+
<libs_ui-components-inputs-input-valid
|
|
60
|
+
[(item)]="userData"
|
|
61
|
+
[fieldNameBind]="'email'"
|
|
62
|
+
[validPattern]="[{ pattern: /^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$/, message: 'Email không hợp lệ' }]"
|
|
63
|
+
[functionValid]="customValidator"></libs_ui-components-inputs-input-valid>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## API Reference
|
|
67
|
+
|
|
68
|
+
### Inputs
|
|
69
|
+
|
|
70
|
+
| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả |
|
|
71
|
+
| :------------------------ | :-------------------------- | :---------- | :-------------------------------------------------------------- |
|
|
72
|
+
| `item` | `Record<string, any>` | `{}` | Đối tượng chứa dữ liệu cần bind (model). |
|
|
73
|
+
| `fieldNameBind` | `string` | `required` | Tên trường trong `item` để liên kết giá trị. |
|
|
74
|
+
| `labelConfig` | `ILabel` | `undefined` | Cấu hình cho nhãn phía trên input. |
|
|
75
|
+
| `validRequired` | `IValidRequired` | `undefined` | Cấu hình kiểm tra bắt buộc nhập. |
|
|
76
|
+
| `validPattern` | `Array<IValidPattern>` | `undefined` | Danh sách các regex để kiểm tra. |
|
|
77
|
+
| `validMinLength` | `IValidLength` | `undefined` | Cấu hình kiểm tra độ dài tối thiểu. |
|
|
78
|
+
| `functionValid` | `TYPE_FUNCTION_INPUT_VALID` | `undefined` | Hàm kiểm tra tùy chỉnh (trả về Promise hoặc IMessageTranslate). |
|
|
79
|
+
| `dataType` | `TYPE_DATA_TYPE_INPUT` | `'string'` | Loại dữ liệu (string, number, int, bigint...). |
|
|
80
|
+
| `debounceTimeValidate` | `number` | `0` | Thời gian chờ trước khi thực hiện validate (ms). |
|
|
81
|
+
| `typeComponentSelectItem` | `'radio' \| 'checkbox'` | `undefined` | Hiển thị thêm radio hoặc checkbox bên trái. |
|
|
82
|
+
|
|
83
|
+
### Outputs
|
|
84
|
+
|
|
85
|
+
| Sự kiện | Kiểu dữ liệu | Mô tả |
|
|
86
|
+
| :-------------------- | :-------------------------------- | :---------------------------------------------------- |
|
|
87
|
+
| `outValueChange` | `any` | Phát ra giá trị mới sau khi đã qua debounce validate. |
|
|
88
|
+
| `outFunctionsControl` | `IInputValidFunctionControlEvent` | Cung cấp các phương thức điều khiển component. |
|
|
89
|
+
| `outEnterInputEvent` | `IEvent` | Phát ra khi nhấn phím Enter trong ô nhập liệu. |
|
|
90
|
+
|
|
91
|
+
### Methods (via outFunctionsControl)
|
|
92
|
+
|
|
93
|
+
- `checkIsValid()`: Thực hiện kiểm tra toàn bộ điều kiện và trả về kết quả (Boolean).
|
|
94
|
+
- `setMessageError(message)`: Cài đặt thông báo lỗi thủ công.
|
|
95
|
+
- `focus()` / `blur()`: Điều khiển tiêu điểm của ô nhập liệu.
|
|
96
|
+
- `resetValue()`: Xóa giá trị hiện tại.
|
|
97
|
+
|
|
98
|
+
## Types & Interfaces
|
|
99
|
+
|
|
100
|
+
### IValidRequired
|
|
101
|
+
|
|
102
|
+
Giao diện cho cấu hình kiểm tra bắt buộc nhập.
|
|
103
|
+
|
|
104
|
+
```typescript
|
|
105
|
+
export interface IValidRequired extends IMessageTranslate {
|
|
106
|
+
isRequired: boolean;
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### IValidPattern
|
|
111
|
+
|
|
112
|
+
Giao diện cho cấu hình kiểm tra theo Regex.
|
|
113
|
+
|
|
114
|
+
```typescript
|
|
115
|
+
export interface IValidPattern extends IMessageTranslate {
|
|
116
|
+
pattern: any; // RegExp object
|
|
117
|
+
valuePatternShowError?: boolean; // Mặc định false (báo lỗi khi test() trả về false)
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
### IValidLength
|
|
122
|
+
|
|
123
|
+
Giao diện cho cấu hình kiểm tra độ dài.
|
|
124
|
+
|
|
125
|
+
```typescript
|
|
126
|
+
export interface IValidLength extends IMessageTranslate {
|
|
127
|
+
length: number;
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### IInputValidFunctionControlEvent
|
|
132
|
+
|
|
133
|
+
Giao diện điều khiển component, kế thừa từ `IInputFunctionControlEvent`.
|
|
134
|
+
|
|
135
|
+
```typescript
|
|
136
|
+
export interface IInputValidFunctionControlEvent extends IInputFunctionControlEvent {
|
|
137
|
+
checkIsValid: () => Promise<boolean>;
|
|
138
|
+
setMessageError: (message: string) => Promise<void>;
|
|
139
|
+
currentStateIsValid?: () => Promise<boolean>;
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
### TYPE_FUNCTION_INPUT_VALID
|
|
144
|
+
|
|
145
|
+
Kiểu cho hàm validate tùy chỉnh.
|
|
146
|
+
|
|
147
|
+
```typescript
|
|
148
|
+
export type TYPE_FUNCTION_INPUT_VALID = (value: any) => Promise<IMessageTranslate>;
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
## Tech Stack
|
|
152
|
+
|
|
153
|
+
- **Core**: Angular 18+, Signals, RxJS
|
|
154
|
+
- **Dependencies**: `@libs-ui/components-inputs-input`, `@libs-ui/components-label`.
|
|
155
|
+
|
|
156
|
+
## License
|
|
157
|
+
|
|
158
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-inputs-valid",
|
|
3
|
-
"version": "0.2.355-
|
|
3
|
+
"version": "0.2.355-15",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/components-inputs-input": "0.2.355-
|
|
7
|
-
"@libs-ui/interfaces-types": "0.2.355-
|
|
8
|
-
"@libs-ui/components-buttons-button": "0.2.355-
|
|
9
|
-
"@libs-ui/components-checkbox-single": "0.2.355-
|
|
10
|
-
"@libs-ui/components-label": "0.2.355-
|
|
11
|
-
"@libs-ui/components-popover": "0.2.355-
|
|
12
|
-
"@libs-ui/components-radio-single": "0.2.355-
|
|
13
|
-
"@libs-ui/components-switch": "0.2.355-
|
|
14
|
-
"@libs-ui/utils": "0.2.355-
|
|
6
|
+
"@libs-ui/components-inputs-input": "0.2.355-15",
|
|
7
|
+
"@libs-ui/interfaces-types": "0.2.355-15",
|
|
8
|
+
"@libs-ui/components-buttons-button": "0.2.355-15",
|
|
9
|
+
"@libs-ui/components-checkbox-single": "0.2.355-15",
|
|
10
|
+
"@libs-ui/components-label": "0.2.355-15",
|
|
11
|
+
"@libs-ui/components-popover": "0.2.355-15",
|
|
12
|
+
"@libs-ui/components-radio-single": "0.2.355-15",
|
|
13
|
+
"@libs-ui/components-switch": "0.2.355-15",
|
|
14
|
+
"@libs-ui/utils": "0.2.355-15",
|
|
15
15
|
"@ngx-translate/core": "^15.0.0"
|
|
16
16
|
},
|
|
17
17
|
"sideEffects": false,
|