@libs-ui/components-inputs-valid 0.2.356-9 → 0.2.357-0
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 +503 -162
- package/esm2022/valid.component.mjs +22 -11
- package/fesm2022/libs-ui-components-inputs-valid.mjs +22 -11
- package/fesm2022/libs-ui-components-inputs-valid.mjs.map +1 -1
- package/package.json +10 -10
- package/valid.component.d.ts +14 -3
package/README.md
CHANGED
|
@@ -1,212 +1,519 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
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()`...
|
|
1
|
+
# @libs-ui/components-inputs-valid
|
|
21
2
|
|
|
22
|
-
|
|
3
|
+
> Component input tích hợp validation, label và binding dữ liệu — giải pháp all-in-one cho form Angular.
|
|
4
|
+
|
|
5
|
+
## Giới thiệu
|
|
6
|
+
|
|
7
|
+
`@libs-ui/components-inputs-valid` là component cấp cao (high-level) kết hợp ba phần tử: nhãn (`label`), ô nhập liệu (`input`) và cơ chế kiểm tra tính hợp lệ (`validation`) vào một component duy nhất. Component tự động bind dữ liệu hai chiều vào đối tượng thông qua `fieldNameBind`, tự quản lý trạng thái lỗi và hiển thị thông báo — giúp giảm đáng kể boilerplate khi xây dựng form phức tạp. Hỗ trợ nhiều loại validation: bắt buộc nhập, độ dài, giá trị số, regex, và hàm async tùy chỉnh.
|
|
8
|
+
|
|
9
|
+
## Tính năng
|
|
23
10
|
|
|
24
|
-
|
|
11
|
+
- ✅ **Two-way binding tự động**: Bind trực tiếp với trường trong object qua `fieldNameBind` và `item` model
|
|
12
|
+
- ✅ **Label tích hợp**: Hỗ trợ `ILabel` đầy đủ — required mark, popover, buttons, toggle, switch
|
|
13
|
+
- ✅ **Validation toàn diện**: Required, min/max length, min/max value, regex pattern, hàm async tùy chỉnh
|
|
14
|
+
- ✅ **Debounced validation**: Trì hoãn validate qua `debounceTimeValidate` để tối ưu hiệu năng
|
|
15
|
+
- ✅ **Unit bên trái/phải**: Hiển thị dropdown đơn vị kết hợp với input (VD: USD, VND, kg, %)
|
|
16
|
+
- ✅ **Radio/Checkbox tích hợp**: Thêm checkbox hoặc radio bên trái input để chọn/bỏ chọn dòng
|
|
17
|
+
- ✅ **FunctionsControl API**: Truy cập `checkIsValid()`, `setMessageError()`, `focus()`, `blur()`, `resetValue()` qua ViewChild
|
|
18
|
+
- ✅ **Hỗ trợ bigint**: Validate giá trị bigint với giới hạn an toàn tự động
|
|
19
|
+
- ✅ **Template slots**: Hỗ trợ `templateLeftBottomInput` và `templateRightBottomInput` cho nội dung tùy chỉnh
|
|
20
|
+
|
|
21
|
+
## Khi nào sử dụng
|
|
22
|
+
|
|
23
|
+
- Xây dựng form nhập liệu cần validation tập trung (form thêm mới, chỉnh sửa)
|
|
24
|
+
- Cần hiển thị label + input + error message trong một block đồng nhất
|
|
25
|
+
- Input cần đơn vị (tiền tệ, trọng lượng, phần trăm) bên trái hoặc phải
|
|
26
|
+
- Cần gọi `checkIsValid()` programmatically trước khi submit form
|
|
27
|
+
- Input trong bảng danh sách có checkbox/radio chọn dòng tích hợp
|
|
28
|
+
|
|
29
|
+
## Cài đặt
|
|
25
30
|
|
|
26
31
|
```bash
|
|
27
32
|
npm install @libs-ui/components-inputs-valid
|
|
28
33
|
```
|
|
29
34
|
|
|
30
|
-
##
|
|
31
|
-
|
|
32
|
-
### Import Module
|
|
35
|
+
## Import
|
|
33
36
|
|
|
34
37
|
```typescript
|
|
35
38
|
import { LibsUiComponentsInputsValidComponent } from '@libs-ui/components-inputs-valid';
|
|
39
|
+
import {
|
|
40
|
+
IValidRequired,
|
|
41
|
+
IValidPattern,
|
|
42
|
+
IValidLength,
|
|
43
|
+
IInputValidUnitConfig,
|
|
44
|
+
IInputValidFunctionControlEvent,
|
|
45
|
+
TYPE_FUNCTION_INPUT_VALID,
|
|
46
|
+
} from '@libs-ui/components-inputs-valid';
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Ví dụ sử dụng
|
|
50
|
+
|
|
51
|
+
### Ví dụ 1 — Input bắt buộc với label và kiểm tra độ dài
|
|
52
|
+
|
|
53
|
+
```typescript
|
|
54
|
+
// component.ts
|
|
55
|
+
import { Component, signal } from '@angular/core';
|
|
56
|
+
import { LibsUiComponentsInputsValidComponent, IInputValidFunctionControlEvent } from '@libs-ui/components-inputs-valid';
|
|
36
57
|
|
|
37
58
|
@Component({
|
|
38
59
|
standalone: true,
|
|
39
60
|
imports: [LibsUiComponentsInputsValidComponent],
|
|
40
|
-
|
|
61
|
+
templateUrl: './create-user.component.html',
|
|
62
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
41
63
|
})
|
|
42
|
-
export class
|
|
64
|
+
export class CreateUserComponent {
|
|
65
|
+
protected formData = signal<Record<string, any>>({
|
|
66
|
+
username: '',
|
|
67
|
+
email: '',
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
private usernameControl: IInputValidFunctionControlEvent | undefined;
|
|
71
|
+
|
|
72
|
+
protected handlerUsernameControl(control: IInputValidFunctionControlEvent): void {
|
|
73
|
+
this.usernameControl = control;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
protected async handlerSubmit(event: Event): Promise<void> {
|
|
77
|
+
event.stopPropagation();
|
|
78
|
+
const isValid = await this.usernameControl?.checkIsValid();
|
|
79
|
+
if (!isValid) return;
|
|
80
|
+
// Gửi form...
|
|
81
|
+
}
|
|
82
|
+
}
|
|
43
83
|
```
|
|
44
84
|
|
|
45
|
-
### Ví dụ cơ bản (Bắt buộc nhập và Kiểm tra độ dài)
|
|
46
|
-
|
|
47
85
|
```html
|
|
48
|
-
|
|
49
|
-
|
|
86
|
+
<!-- create-user.component.html -->
|
|
87
|
+
<libs_ui-components-inputs-valid
|
|
88
|
+
[(item)]="formData"
|
|
50
89
|
[fieldNameBind]="'username'"
|
|
51
|
-
[labelConfig]="{
|
|
90
|
+
[labelConfig]="{
|
|
91
|
+
labelLeft: 'Tên đăng nhập',
|
|
92
|
+
required: true
|
|
93
|
+
}"
|
|
52
94
|
[validRequired]="{ isRequired: true, message: 'Vui lòng nhập tên đăng nhập' }"
|
|
53
|
-
[validMinLength]="{ length:
|
|
95
|
+
[validMinLength]="{ length: 6, message: 'Tối thiểu 6 ký tự' }"
|
|
96
|
+
[maxLength]="50"
|
|
97
|
+
[placeholder]="'Nhập tên đăng nhập'"
|
|
98
|
+
(outFunctionsControl)="handlerUsernameControl($event)" />
|
|
54
99
|
```
|
|
55
100
|
|
|
56
|
-
###
|
|
101
|
+
### Ví dụ 2 — Validate email bằng regex và hàm async tùy chỉnh
|
|
102
|
+
|
|
103
|
+
```typescript
|
|
104
|
+
// component.ts
|
|
105
|
+
import { Component, signal } from '@angular/core';
|
|
106
|
+
import { LibsUiComponentsInputsValidComponent, TYPE_FUNCTION_INPUT_VALID } from '@libs-ui/components-inputs-valid';
|
|
107
|
+
|
|
108
|
+
@Component({
|
|
109
|
+
standalone: true,
|
|
110
|
+
imports: [LibsUiComponentsInputsValidComponent],
|
|
111
|
+
templateUrl: './register.component.html',
|
|
112
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
113
|
+
})
|
|
114
|
+
export class RegisterComponent {
|
|
115
|
+
protected formData = signal<Record<string, any>>({ email: '' });
|
|
116
|
+
|
|
117
|
+
protected readonly emailPatterns = [
|
|
118
|
+
{
|
|
119
|
+
pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
|
|
120
|
+
message: 'Email không đúng định dạng',
|
|
121
|
+
},
|
|
122
|
+
];
|
|
123
|
+
|
|
124
|
+
protected readonly checkEmailExists: TYPE_FUNCTION_INPUT_VALID = async (value) => {
|
|
125
|
+
if (!value) return { message: undefined, interpolateParams: undefined };
|
|
126
|
+
// Giả lập gọi API kiểm tra email
|
|
127
|
+
const exists = await fakeCheckEmailApi(value as string);
|
|
128
|
+
return exists
|
|
129
|
+
? { message: 'Email này đã được sử dụng', interpolateParams: {} }
|
|
130
|
+
: { message: undefined, interpolateParams: undefined };
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
protected handlerValueChange(value: any): void {
|
|
134
|
+
// Xử lý sau khi value thay đổi
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
```
|
|
57
138
|
|
|
58
139
|
```html
|
|
59
|
-
|
|
60
|
-
|
|
140
|
+
<!-- register.component.html -->
|
|
141
|
+
<libs_ui-components-inputs-valid
|
|
142
|
+
[(item)]="formData"
|
|
61
143
|
[fieldNameBind]="'email'"
|
|
62
|
-
[
|
|
63
|
-
[
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
-
|
|
169
|
-
|
|
144
|
+
[labelConfig]="{ labelLeft: 'Email', required: true }"
|
|
145
|
+
[validRequired]="{ isRequired: true, message: 'Vui lòng nhập email' }"
|
|
146
|
+
[validPattern]="emailPatterns"
|
|
147
|
+
[functionValid]="checkEmailExists"
|
|
148
|
+
[debounceTimeValidate]="500"
|
|
149
|
+
[placeholder]="'example@company.com'"
|
|
150
|
+
(outValueChange)="handlerValueChange($event)" />
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
### Ví dụ 3 — Input số với đơn vị và giới hạn giá trị
|
|
154
|
+
|
|
155
|
+
```typescript
|
|
156
|
+
// component.ts
|
|
157
|
+
import { Component, signal } from '@angular/core';
|
|
158
|
+
import { LibsUiComponentsInputsValidComponent, IInputValidUnitConfig } from '@libs-ui/components-inputs-valid';
|
|
159
|
+
|
|
160
|
+
@Component({
|
|
161
|
+
standalone: true,
|
|
162
|
+
imports: [LibsUiComponentsInputsValidComponent],
|
|
163
|
+
templateUrl: './price-input.component.html',
|
|
164
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
165
|
+
})
|
|
166
|
+
export class PriceInputComponent {
|
|
167
|
+
protected formData = signal<Record<string, any>>({ price: null, currency: 'vnd' });
|
|
168
|
+
|
|
169
|
+
protected readonly currencies = [
|
|
170
|
+
{ id: 'vnd', label: 'VND' },
|
|
171
|
+
{ id: 'usd', label: 'USD' },
|
|
172
|
+
];
|
|
173
|
+
|
|
174
|
+
protected readonly unitConfig: IInputValidUnitConfig = {
|
|
175
|
+
fieldKey: 'id',
|
|
176
|
+
fieldLabel: 'label',
|
|
177
|
+
};
|
|
178
|
+
|
|
179
|
+
protected handlerValueChange(value: any): void {
|
|
180
|
+
// Xử lý sau khi giá thay đổi
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
```html
|
|
186
|
+
<!-- price-input.component.html -->
|
|
187
|
+
<libs_ui-components-inputs-valid
|
|
188
|
+
[(item)]="formData"
|
|
189
|
+
[fieldNameBind]="'price'"
|
|
190
|
+
[labelConfig]="{ labelLeft: 'Giá bán', required: true }"
|
|
191
|
+
[dataType]="'number'"
|
|
192
|
+
[minValueNumber]="0"
|
|
193
|
+
[maxValueNumber]="999999999"
|
|
194
|
+
[validRequired]="{ isRequired: true, message: 'Vui lòng nhập giá' }"
|
|
195
|
+
[validMinValue]="{ message: 'Giá phải lớn hơn 0', interpolateParams: {} }"
|
|
196
|
+
[validMaxValue]="{ message: 'Giá không vượt quá 999,999,999', interpolateParams: {} }"
|
|
197
|
+
[unitsRight]="currencies"
|
|
198
|
+
[configUnitRight]="unitConfig"
|
|
199
|
+
[keySelectedUnitRight]="formData()['currency']"
|
|
200
|
+
(outValueChange)="handlerValueChange($event)" />
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
### Ví dụ 4 — Textarea với validate và đếm ký tự
|
|
204
|
+
|
|
205
|
+
```typescript
|
|
206
|
+
// component.ts
|
|
207
|
+
import { Component, signal } from '@angular/core';
|
|
208
|
+
import { LibsUiComponentsInputsValidComponent } from '@libs-ui/components-inputs-valid';
|
|
209
|
+
|
|
210
|
+
@Component({
|
|
211
|
+
standalone: true,
|
|
212
|
+
imports: [LibsUiComponentsInputsValidComponent],
|
|
213
|
+
templateUrl: './note-form.component.html',
|
|
214
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
215
|
+
})
|
|
216
|
+
export class NoteFormComponent {
|
|
217
|
+
protected formData = signal<Record<string, any>>({ note: '' });
|
|
218
|
+
|
|
219
|
+
protected handlerHeightChange(event: { isChange: boolean }): void {
|
|
220
|
+
// Xử lý khi textarea thay đổi chiều cao
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
```html
|
|
226
|
+
<!-- note-form.component.html -->
|
|
227
|
+
<libs_ui-components-inputs-valid
|
|
228
|
+
[(item)]="formData"
|
|
229
|
+
[fieldNameBind]="'note'"
|
|
230
|
+
[labelConfig]="{ labelLeft: 'Ghi chú', limitLength: 500, onlyShowCount: true }"
|
|
231
|
+
[tagInput]="'textarea'"
|
|
232
|
+
[maxLength]="500"
|
|
233
|
+
[showCount]="true"
|
|
234
|
+
[minHeightTextArea]="80"
|
|
235
|
+
[maxHeightTextArea]="200"
|
|
236
|
+
[placeholder]="'Nhập ghi chú...'"
|
|
237
|
+
(outHeightAreaChange)="handlerHeightChange($event)" />
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
### Ví dụ 5 — Validate form nhiều trường với checkIsValid trước khi submit
|
|
241
|
+
|
|
242
|
+
```typescript
|
|
243
|
+
// component.ts
|
|
244
|
+
import { Component, signal } from '@angular/core';
|
|
245
|
+
import { LibsUiComponentsInputsValidComponent, IInputValidFunctionControlEvent } from '@libs-ui/components-inputs-valid';
|
|
246
|
+
|
|
247
|
+
@Component({
|
|
248
|
+
standalone: true,
|
|
249
|
+
imports: [LibsUiComponentsInputsValidComponent],
|
|
250
|
+
templateUrl: './contact-form.component.html',
|
|
251
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
252
|
+
})
|
|
253
|
+
export class ContactFormComponent {
|
|
254
|
+
protected formData = signal<Record<string, any>>({
|
|
255
|
+
fullName: '',
|
|
256
|
+
phone: '',
|
|
257
|
+
});
|
|
258
|
+
|
|
259
|
+
private nameControl: IInputValidFunctionControlEvent | undefined;
|
|
260
|
+
private phoneControl: IInputValidFunctionControlEvent | undefined;
|
|
261
|
+
|
|
262
|
+
protected handlerNameControl(control: IInputValidFunctionControlEvent): void {
|
|
263
|
+
this.nameControl = control;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
protected handlerPhoneControl(control: IInputValidFunctionControlEvent): void {
|
|
267
|
+
this.phoneControl = control;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
protected async handlerSubmit(event: Event): Promise<void> {
|
|
271
|
+
event.stopPropagation();
|
|
272
|
+
const [isNameValid, isPhoneValid] = await Promise.all([
|
|
273
|
+
this.nameControl?.checkIsValid(),
|
|
274
|
+
this.phoneControl?.checkIsValid(),
|
|
275
|
+
]);
|
|
276
|
+
if (!isNameValid || !isPhoneValid) return;
|
|
277
|
+
// Submit form...
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
protected readonly phonePatterns = [
|
|
281
|
+
{
|
|
282
|
+
pattern: /^(0|\+84)[0-9]{9}$/,
|
|
283
|
+
message: 'Số điện thoại không đúng định dạng (VD: 0912345678)',
|
|
284
|
+
},
|
|
285
|
+
];
|
|
286
|
+
}
|
|
287
|
+
```
|
|
288
|
+
|
|
289
|
+
```html
|
|
290
|
+
<!-- contact-form.component.html -->
|
|
291
|
+
<libs_ui-components-inputs-valid
|
|
292
|
+
[(item)]="formData"
|
|
293
|
+
[fieldNameBind]="'fullName'"
|
|
294
|
+
[labelConfig]="{ labelLeft: 'Họ và tên', required: true }"
|
|
295
|
+
[validRequired]="{ isRequired: true, message: 'Vui lòng nhập họ và tên' }"
|
|
296
|
+
[validMinLength]="{ length: 2, message: 'Tối thiểu 2 ký tự' }"
|
|
297
|
+
(outFunctionsControl)="handlerNameControl($event)" />
|
|
298
|
+
|
|
299
|
+
<libs_ui-components-inputs-valid
|
|
300
|
+
[(item)]="formData"
|
|
301
|
+
[fieldNameBind]="'phone'"
|
|
302
|
+
[labelConfig]="{ labelLeft: 'Số điện thoại', required: true }"
|
|
303
|
+
[validRequired]="{ isRequired: true, message: 'Vui lòng nhập số điện thoại' }"
|
|
304
|
+
[validPattern]="phonePatterns"
|
|
305
|
+
(outFunctionsControl)="handlerPhoneControl($event)" />
|
|
306
|
+
|
|
307
|
+
<button (click)="handlerSubmit($event)">Gửi</button>
|
|
308
|
+
```
|
|
309
|
+
|
|
310
|
+
## @Input()
|
|
311
|
+
|
|
312
|
+
| Input | Type | Default | Mô tả | Ví dụ |
|
|
313
|
+
|---|---|---|---|---|
|
|
314
|
+
| `item` *(model, required)* | `Record<string, any>` | — | Đối tượng chứa dữ liệu. Two-way binding qua `[(item)]` | `[(item)]="formData"` |
|
|
315
|
+
| `fieldNameBind` *(required)* | `string` | — | Tên trường trong `item` cần bind giá trị | `[fieldNameBind]="'email'"` |
|
|
316
|
+
| `labelConfig` | `ILabel` | `undefined` | Cấu hình label phía trên input (text, required mark, popover, buttons) | `[labelConfig]="{ labelLeft: 'Email', required: true }"` |
|
|
317
|
+
| `acceptNegativeValue` | `boolean` | `undefined` | Cho phép nhập số âm | `[acceptNegativeValue]="true"` |
|
|
318
|
+
| `autoAddZeroLessThan10InTypeInt` | `boolean` | `undefined` | Tự động thêm số 0 đứng trước nếu giá trị < 10 (kiểu int) | `[autoAddZeroLessThan10InTypeInt]="true"` |
|
|
319
|
+
| `autoRemoveEmoji` | `boolean` | `undefined` | Tự động xóa emoji khi người dùng nhập | `[autoRemoveEmoji]="true"` |
|
|
320
|
+
| `backgroundNone` | `boolean` | `undefined` | Loại bỏ màu nền mặc định của input | `[backgroundNone]="true"` |
|
|
321
|
+
| `borderError` | `boolean` | `undefined` | Luôn hiển thị border đỏ bất kể trạng thái lỗi | `[borderError]="true"` |
|
|
322
|
+
| `classContainerBottomInput` | `string` | `undefined` | Class CSS cho vùng container phía dưới input | `[classContainerBottomInput]="'mt-2'"` |
|
|
323
|
+
| `classContainerInput` | `string` | `undefined` | Class CSS cho container bao quanh thẻ input | `[classContainerInput]="'relative'"` |
|
|
324
|
+
| `classInclude` | `string` | `undefined` | Class CSS tổng thể cho toàn bộ component | `[classInclude]="'mb-4'"` |
|
|
325
|
+
| `classIncludeInput` | `string` | `undefined` | Class CSS cho thẻ input/textarea | `[classIncludeInput]="'text-right'"` |
|
|
326
|
+
| `classMessageErrorInclude` | `string` | `undefined` | Class CSS bổ sung cho block thông báo lỗi | `[classMessageErrorInclude]="'mt-1'"` |
|
|
327
|
+
| `configUnitLeft` | `IInputValidUnitConfig` | `{ fieldKey: 'id', fieldLabel: 'label' }` | Cấu hình mapping trường key/label cho đơn vị trái | `[configUnitLeft]="{ fieldKey: 'id', fieldLabel: 'name' }"` |
|
|
328
|
+
| `configUnitRight` | `IInputValidUnitConfig` | `{ fieldKey: 'id', fieldLabel: 'label' }` | Cấu hình mapping trường key/label cho đơn vị phải | `[configUnitRight]="{ fieldKey: 'id', fieldLabel: 'name' }"` |
|
|
329
|
+
| `dataType` | `TYPE_DATA_TYPE_INPUT` | `'string'` | Kiểu dữ liệu: `'string'`, `'number'`, `'int'`, `'bigint'`, ... | `[dataType]="'number'"` |
|
|
330
|
+
| `debounceTimeValidate` | `number` | `0` | Thời gian chờ (ms) trước khi kích hoạt validate sau khi nhập | `[debounceTimeValidate]="300"` |
|
|
331
|
+
| `defaultHeight` | `number` | `undefined` | Chiều cao mặc định của input (px) | `[defaultHeight]="40"` |
|
|
332
|
+
| `disable` | `boolean` | `undefined` | Vô hiệu hóa toàn bộ input | `[disable]="isDisabled()"` |
|
|
333
|
+
| `disableComponentSelectItem` | `boolean` | `undefined` | Vô hiệu hóa checkbox/radio tích hợp bên trái | `[disableComponentSelectItem]="true"` |
|
|
334
|
+
| `emitEmptyInDataTypeNumber` | `boolean` | `undefined` | Emit giá trị rỗng thay vì null khi xóa input kiểu number | `[emitEmptyInDataTypeNumber]="true"` |
|
|
335
|
+
| `fixedFloat` | `number` | `undefined` | Số chữ số thập phân cố định cho kiểu number | `[fixedFloat]="2"` |
|
|
336
|
+
| `focusTimeOut` | `number` | `undefined` | Độ trễ (ms) trước khi focus vào input | `[focusTimeOut]="100"` |
|
|
337
|
+
| `functionValid` | `TYPE_FUNCTION_INPUT_VALID` | `undefined` | Hàm validate tùy chỉnh, hỗ trợ async, trả về `IMessageTranslate` | `[functionValid]="checkEmailExists"` |
|
|
338
|
+
| `iconLeftClass` | `string` | `undefined` | Class CSS cho icon bên trái bên trong input | `[iconLeftClass]="'icon-search'"` |
|
|
339
|
+
| `iconRightClass` | `string` | `undefined` | Class CSS cho icon bên phải bên trong input | `[iconRightClass]="'icon-calendar'"` |
|
|
340
|
+
| `ignoreBlockInputMaxValue` | `boolean` | `undefined` | Cho phép nhập quá maxValueNumber (chỉ hiển thị lỗi, không chặn) | `[ignoreBlockInputMaxValue]="true"` |
|
|
341
|
+
| `ignoreContentLeft` | `boolean` | `undefined` | Ẩn toàn bộ vùng bên trái (units, checkbox/radio) | `[ignoreContentLeft]="true"` |
|
|
342
|
+
| `ignoreContentRight` | `boolean` | `undefined` | Ẩn toàn bộ vùng bên phải (units) | `[ignoreContentRight]="true"` |
|
|
343
|
+
| `ignoreShowError` | `boolean` | `undefined` | **@deprecated** — Dùng `ignoreShowMessageError` thay thế | — |
|
|
344
|
+
| `ignoreShowMessageError` | `boolean` | `undefined` | Ẩn text thông báo lỗi nhưng vẫn hiển thị border đỏ khi có lỗi | `[ignoreShowMessageError]="true"` |
|
|
345
|
+
| `ignoreStopPropagationEvent` | `boolean` | `undefined` | Bỏ qua stopPropagation trong các event handler | `[ignoreStopPropagationEvent]="true"` |
|
|
346
|
+
| `ignoreUnitRightClassReadOnly` | `boolean` | `undefined` | Không áp dụng class readonly cho đơn vị bên phải | `[ignoreUnitRightClassReadOnly]="true"` |
|
|
347
|
+
| `ignoreWidthInput100` | `boolean` | `undefined` | Không đặt `width: 100%` cho thẻ input bên trong | `[ignoreWidthInput100]="true"` |
|
|
348
|
+
| `isBaselineStyle` | `boolean` | `undefined` | Căn `align-items: baseline` — dùng khi cần căn input thẳng hàng với label/text cùng dòng | `[isBaselineStyle]="true"` |
|
|
349
|
+
| `keepPlaceholderOnly` | `boolean` | `undefined` | Chỉ hiển thị placeholder, không hiển thị giá trị thực | `[keepPlaceholderOnly]="true"` |
|
|
350
|
+
| `keySelectedUnitLeft` | `any` | `undefined` | Key của đơn vị bên trái đang được active | `[keySelectedUnitLeft]="formData()['unitLeft']"` |
|
|
351
|
+
| `keySelectedUnitRight` | `any` | `undefined` | Key của đơn vị bên phải đang được active | `[keySelectedUnitRight]="formData()['currency']"` |
|
|
352
|
+
| `maxHeightTextArea` | `number` | `250` | Chiều cao tối đa (px) cho textarea khi auto-resize | `[maxHeightTextArea]="300"` |
|
|
353
|
+
| `maxLength` | `number` | `undefined` | Độ dài ký tự tối đa, hiển thị lỗi khi vượt quá | `[maxLength]="255"` |
|
|
354
|
+
| `maxLengthNumberCount` | `number` | `undefined` | Giới hạn số lượng chữ số hiển thị trong bộ đếm | `[maxLengthNumberCount]="10"` |
|
|
355
|
+
| `maxValueNumber` | `number` | `undefined` | Giá trị số tối đa được phép nhập | `[maxValueNumber]="100"` |
|
|
356
|
+
| `minHeightTextArea` | `number` | `undefined` | Chiều cao tối thiểu (px) cho textarea | `[minHeightTextArea]="80"` |
|
|
357
|
+
| `minValueNumber` | `number` | `undefined` | Giá trị số tối thiểu được phép nhập | `[minValueNumber]="0"` |
|
|
358
|
+
| `modeInput` | `TYPE_MODE_INPUT` | `undefined` | Chế độ nhập: `'password'`, `'text'`, ... | `[modeInput]="'password'"` |
|
|
359
|
+
| `noBorder` | `boolean` | `undefined` | Ẩn viền của input | `[noBorder]="true"` |
|
|
360
|
+
| `onlyAcceptNegativeValue` | `boolean` | `undefined` | Chỉ chấp nhận giá trị âm | `[onlyAcceptNegativeValue]="true"` |
|
|
361
|
+
| `paddingRightCustomSpecific` | `number` | `undefined` | Custom padding-right khi showCount không tự tính được (workaround cho #52185) | `[paddingRightCustomSpecific]="60"` |
|
|
362
|
+
| `placeholder` | `string` | `undefined` | Văn bản placeholder của input | `[placeholder]="'Nhập nội dung...'"` |
|
|
363
|
+
| `popoverContentIconLeft` | `string` | `undefined` | Nội dung tooltip/popover khi hover icon trái | `[popoverContentIconLeft]="'Tìm kiếm'"` |
|
|
364
|
+
| `popoverContentIconRight` | `string` | `undefined` | Nội dung tooltip/popover khi hover icon phải | `[popoverContentIconRight]="'Chọn ngày'"` |
|
|
365
|
+
| `positionMessageErrorStartInput` | `boolean` | `undefined` | Hiển thị thông báo lỗi thẳng hàng với input thay vì từ lề trái | `[positionMessageErrorStartInput]="true"` |
|
|
366
|
+
| `readonly` | `boolean` | `undefined` | Chế độ chỉ đọc — không cho phép chỉnh sửa | `[readonly]="isReadOnly()"` |
|
|
367
|
+
| `resetAutoCompletePassword` | `boolean` | `undefined` | Reset trạng thái autocomplete cho input password | `[resetAutoCompletePassword]="true"` |
|
|
368
|
+
| `resize` | `TYPE_INPUT_RESIZE_MODE` | `undefined` | Chế độ resize cho textarea: `'none'`, `'vertical'`, ... | `[resize]="'none'"` |
|
|
369
|
+
| `showCount` | `boolean` | `undefined` | Hiển thị bộ đếm ký tự hiện tại / maxLength | `[showCount]="true"` |
|
|
370
|
+
| `tagInput` | `TYPE_TAG_INPUT` | `undefined` | Loại thẻ: `'input'` (mặc định) hoặc `'textarea'` | `[tagInput]="'textarea'"` |
|
|
371
|
+
| `templateLeftBottomInput` | `TemplateRef` | `undefined` | Template tùy chỉnh hiển thị ở góc dưới trái input | `[templateLeftBottomInput]="myTpl"` |
|
|
372
|
+
| `templateRightBottomInput` | `TemplateRef` | `undefined` | Template tùy chỉnh hiển thị ở góc dưới phải input | `[templateRightBottomInput]="myTpl"` |
|
|
373
|
+
| `textAreaEnterNotNewLine` | `boolean` | `undefined` | Phím Enter không xuống dòng trong textarea | `[textAreaEnterNotNewLine]="true"` |
|
|
374
|
+
| `typeComponentSelectItem` | `'radio' \| 'checkbox'` | `undefined` | Thêm radio hoặc checkbox tích hợp bên trái input | `[typeComponentSelectItem]="'checkbox'"` |
|
|
375
|
+
| `typeInput` | `TYPE_INPUT` | `undefined` | Kiểu HTML input: `'text'`, `'number'`, ... | `[typeInput]="'text'"` |
|
|
376
|
+
| `unitsLeft` | `any[]` | `undefined` | Danh sách đơn vị hiển thị bên trái input | `[unitsLeft]="currencies"` |
|
|
377
|
+
| `unitsRight` | `any[]` | `undefined` | Danh sách đơn vị hiển thị bên phải input | `[unitsRight]="currencies"` |
|
|
378
|
+
| `useColorModeExist` | `boolean` | `undefined` | Dùng màu sắc theo theme hiện tại của hệ thống | `[useColorModeExist]="true"` |
|
|
379
|
+
| `validMaxLength` | `IMessageTranslate` | `undefined` | Thông báo lỗi khi vượt quá `maxLength` | `[validMaxLength]="{ message: 'Tối đa 255 ký tự' }"` |
|
|
380
|
+
| `validMaxValue` | `IMessageTranslate` | `undefined` | Thông báo lỗi khi vượt quá `maxValueNumber` | `[validMaxValue]="{ message: 'Giá trị quá lớn' }"` |
|
|
381
|
+
| `validMinLength` | `IValidLength` | `undefined` | Kiểm tra độ dài tối thiểu của chuỗi | `[validMinLength]="{ length: 6, message: 'Tối thiểu 6 ký tự' }"` |
|
|
382
|
+
| `validMinValue` | `IMessageTranslate` | `undefined` | Thông báo lỗi khi giá trị nhỏ hơn `minValueNumber` | `[validMinValue]="{ message: 'Giá trị quá nhỏ' }"` |
|
|
383
|
+
| `validPattern` | `IValidPattern[]` | `undefined` | Danh sách regex validate, hiển thị lỗi khi không khớp | `[validPattern]="emailPatterns"` |
|
|
384
|
+
| `validRequired` | `IValidRequired` | `undefined` | Cấu hình trường bắt buộc nhập | `[validRequired]="{ isRequired: true, message: 'Bắt buộc nhập' }"` |
|
|
385
|
+
| `valueComponentSelectItem` | `boolean` | `undefined` | Trạng thái checked của checkbox/radio tích hợp | `[valueComponentSelectItem]="isSelected()"` |
|
|
386
|
+
| `valuePatternShowError` | `boolean` | `false` | Khi `true`: báo lỗi khi pattern match; khi `false`: báo lỗi khi pattern không match | `[valuePatternShowError]="false"` |
|
|
387
|
+
| `valueUpDownNumber` | `number` | `undefined` | Bước nhảy khi nhấn nút tăng/giảm số | `[valueUpDownNumber]="10"` |
|
|
388
|
+
| `zIndexPopoverContent` | `number` | `undefined` | Z-index của popover icon trái/phải | `[zIndexPopoverContent]="1050"` |
|
|
389
|
+
|
|
390
|
+
## @Output()
|
|
391
|
+
|
|
392
|
+
| Output | Type | Mô tả | Handler TS | Binding HTML |
|
|
393
|
+
|---|---|---|---|---|
|
|
394
|
+
| `(outChangeValueByButtonUpDown)` | `void` | Phát ra khi giá trị thay đổi bởi nút tăng/giảm | `handlerChangeByUpDown(): void { event?.stopPropagation(); }` | `(outChangeValueByButtonUpDown)="handlerChangeByUpDown()"` |
|
|
395
|
+
| `(outClickButtonLabel)` | `IButton` | Phát ra khi người dùng click vào button trong label | `handlerClickButtonLabel(button: IButton): void { button; }` | `(outClickButtonLabel)="handlerClickButtonLabel($event)"` |
|
|
396
|
+
| `(outEnterInputEvent)` | `IEvent` | Phát ra khi nhấn phím Enter trong ô nhập liệu | `handlerEnterInput(e: IEvent): void { e; }` | `(outEnterInputEvent)="handlerEnterInput($event)"` |
|
|
397
|
+
| `(outFocusAndBlur)` | `IFocusAndBlurEvent` | Phát ra khi input được focus hoặc blur | `handlerFocusAndBlur(e: IFocusAndBlurEvent): void { e; }` | `(outFocusAndBlur)="handlerFocusAndBlur($event)"` |
|
|
398
|
+
| `(outFunctionsControl)` | `IInputValidFunctionControlEvent` | Cung cấp các phương thức điều khiển programmatic | `handlerFunctionsControl(ctrl: IInputValidFunctionControlEvent): void { this.ctrl = ctrl; }` | `(outFunctionsControl)="handlerFunctionsControl($event)"` |
|
|
399
|
+
| `(outHeightAreaChange)` | `{ isChange: boolean }` | Phát ra khi chiều cao textarea thay đổi (auto-resize) | `handlerHeightChange(e: { isChange: boolean }): void { e; }` | `(outHeightAreaChange)="handlerHeightChange($event)"` |
|
|
400
|
+
| `(outIconLeft)` | `string` | Phát ra tên sự kiện khi click icon bên trái | `handlerIconLeft(eventName: string): void { eventName; }` | `(outIconLeft)="handlerIconLeft($event)"` |
|
|
401
|
+
| `(outIconRight)` | `string` | Phát ra tên sự kiện khi click icon bên phải | `handlerIconRight(eventName: string): void { eventName; }` | `(outIconRight)="handlerIconRight($event)"` |
|
|
402
|
+
| `(outLabelRightClick)` | `boolean` | Phát ra khi click vào label bên phải | `handlerLabelRightClick(value: boolean): void { value; }` | `(outLabelRightClick)="handlerLabelRightClick($event)"` |
|
|
403
|
+
| `(outSelect)` | `boolean` | Phát ra khi thay đổi trạng thái checkbox/radio tích hợp | `handlerSelect(checked: boolean): void { checked; }` | `(outSelect)="handlerSelect($event)"` |
|
|
404
|
+
| `(outSwitchEventLabel)` | `ISwitchEvent` | Phát ra khi thay đổi trạng thái switch trong label | `handlerSwitchLabel(e: ISwitchEvent): void { e; }` | `(outSwitchEventLabel)="handlerSwitchLabel($event)"` |
|
|
405
|
+
| `(outValueChange)` | `any` | Phát ra giá trị mới sau khi validate (có debounce nếu cấu hình) | `handlerValueChange(value: any): void { value; }` | `(outValueChange)="handlerValueChange($event)"` |
|
|
406
|
+
|
|
407
|
+
## FunctionsControl API
|
|
408
|
+
|
|
409
|
+
Nhận về thông qua `(outFunctionsControl)` hoặc `viewChild`. Sử dụng để điều khiển programmatic.
|
|
410
|
+
|
|
411
|
+
```typescript
|
|
412
|
+
import { IInputValidFunctionControlEvent } from '@libs-ui/components-inputs-valid';
|
|
413
|
+
|
|
414
|
+
// Nhận control
|
|
415
|
+
private emailControl: IInputValidFunctionControlEvent | undefined;
|
|
416
|
+
|
|
417
|
+
handlerEmailControl(control: IInputValidFunctionControlEvent): void {
|
|
418
|
+
this.emailControl = control;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
// Gọi trước khi submit
|
|
422
|
+
async handlerSubmit(event: Event): Promise<void> {
|
|
423
|
+
event.stopPropagation();
|
|
424
|
+
const isValid = await this.emailControl?.checkIsValid();
|
|
425
|
+
if (!isValid) return;
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
// Set lỗi từ server
|
|
429
|
+
async handlerApiError(message: string): Promise<void> {
|
|
430
|
+
await this.emailControl?.setMessageError(message);
|
|
431
|
+
}
|
|
432
|
+
```
|
|
433
|
+
|
|
434
|
+
| Method | Signature | Mô tả |
|
|
435
|
+
|---|---|---|
|
|
436
|
+
| `checkIsValid()` | `() => Promise<boolean>` | Chạy toàn bộ validate và trả về `true` nếu hợp lệ, `false` nếu có lỗi |
|
|
437
|
+
| `setMessageError()` | `(message: string) => Promise<void>` | Đặt thông báo lỗi thủ công (VD: lỗi từ API server) |
|
|
438
|
+
| `currentStateIsValid()` | `() => Promise<boolean>` | Trả về trạng thái lỗi hiện tại mà không chạy lại validate |
|
|
439
|
+
| `focus()` | `() => Promise<void>` | Focus vào ô input |
|
|
440
|
+
| `blur()` | `() => Promise<void>` | Blur khỏi ô input |
|
|
441
|
+
| `resetValue()` | `() => Promise<void>` | Xóa giá trị hiện tại trong input |
|
|
442
|
+
| `insertContent()` | `(data: string \| number) => Promise<void>` | Chèn nội dung vào vị trí con trỏ hiện tại |
|
|
443
|
+
| `selectAllContent()` | `() => Promise<void>` | Chọn toàn bộ nội dung trong input |
|
|
444
|
+
| `getElementValue()` | `() => any` | Lấy giá trị hiện tại từ DOM element |
|
|
445
|
+
| `checkAndDisableUpDownButton()` | `(value: any) => Promise<void>` | Kiểm tra và disable nút tăng/giảm theo giá trị |
|
|
170
446
|
|
|
171
447
|
## Types & Interfaces
|
|
172
448
|
|
|
449
|
+
```typescript
|
|
450
|
+
import {
|
|
451
|
+
IValidRequired,
|
|
452
|
+
IValidPattern,
|
|
453
|
+
IValidLength,
|
|
454
|
+
IInputValidUnitConfig,
|
|
455
|
+
IInputValidFunctionControlEvent,
|
|
456
|
+
IInputUnit,
|
|
457
|
+
IValidConfirmPassword,
|
|
458
|
+
TYPE_FUNCTION_INPUT_VALID,
|
|
459
|
+
} from '@libs-ui/components-inputs-valid';
|
|
460
|
+
```
|
|
461
|
+
|
|
173
462
|
### IValidRequired
|
|
174
463
|
|
|
175
|
-
|
|
464
|
+
Cấu hình validate trường bắt buộc.
|
|
176
465
|
|
|
177
466
|
```typescript
|
|
178
|
-
|
|
467
|
+
interface IValidRequired {
|
|
179
468
|
isRequired: boolean;
|
|
469
|
+
message?: string; // Thông báo lỗi (i18n key hoặc text thuần)
|
|
470
|
+
interpolateParams?: object; // Tham số nội suy cho i18n
|
|
180
471
|
}
|
|
181
472
|
```
|
|
182
473
|
|
|
183
474
|
### IValidPattern
|
|
184
475
|
|
|
185
|
-
|
|
476
|
+
Cấu hình validate theo regex.
|
|
186
477
|
|
|
187
478
|
```typescript
|
|
188
|
-
|
|
189
|
-
pattern:
|
|
190
|
-
|
|
479
|
+
interface IValidPattern {
|
|
480
|
+
pattern: RegExp | string; // Biểu thức chính quy
|
|
481
|
+
message?: string; // Thông báo lỗi khi không khớp
|
|
482
|
+
interpolateParams?: object;
|
|
483
|
+
valuePatternShowError?: boolean; // Override global valuePatternShowError cho rule này
|
|
191
484
|
}
|
|
192
485
|
```
|
|
193
486
|
|
|
194
487
|
### IValidLength
|
|
195
488
|
|
|
196
|
-
|
|
489
|
+
Cấu hình validate độ dài tối thiểu.
|
|
197
490
|
|
|
198
491
|
```typescript
|
|
199
|
-
|
|
200
|
-
length: number;
|
|
492
|
+
interface IValidLength {
|
|
493
|
+
length: number; // Số ký tự tối thiểu
|
|
494
|
+
message?: string;
|
|
495
|
+
interpolateParams?: object;
|
|
496
|
+
}
|
|
497
|
+
```
|
|
498
|
+
|
|
499
|
+
### IInputValidUnitConfig
|
|
500
|
+
|
|
501
|
+
Cấu hình mapping field cho danh sách đơn vị.
|
|
502
|
+
|
|
503
|
+
```typescript
|
|
504
|
+
interface IInputValidUnitConfig {
|
|
505
|
+
fieldKey: string; // Tên field dùng làm key (VD: 'id')
|
|
506
|
+
fieldLabel: string; // Tên field dùng làm label hiển thị (VD: 'label')
|
|
507
|
+
classInclude?: string; // Class CSS bổ sung cho block đơn vị
|
|
201
508
|
}
|
|
202
509
|
```
|
|
203
510
|
|
|
204
511
|
### IInputValidFunctionControlEvent
|
|
205
512
|
|
|
206
|
-
|
|
513
|
+
API điều khiển programmatic, kế thừa từ `IInputFunctionControlEvent`.
|
|
207
514
|
|
|
208
515
|
```typescript
|
|
209
|
-
|
|
516
|
+
interface IInputValidFunctionControlEvent extends IInputFunctionControlEvent {
|
|
210
517
|
checkIsValid: () => Promise<boolean>;
|
|
211
518
|
setMessageError: (message: string) => Promise<void>;
|
|
212
519
|
currentStateIsValid?: () => Promise<boolean>;
|
|
@@ -215,17 +522,51 @@ export interface IInputValidFunctionControlEvent extends IInputFunctionControlEv
|
|
|
215
522
|
|
|
216
523
|
### TYPE_FUNCTION_INPUT_VALID
|
|
217
524
|
|
|
218
|
-
Kiểu cho hàm validate tùy chỉnh.
|
|
525
|
+
Kiểu cho hàm validate async tùy chỉnh.
|
|
219
526
|
|
|
220
527
|
```typescript
|
|
221
|
-
|
|
528
|
+
type TYPE_FUNCTION_INPUT_VALID = (value: any) => Promise<IMessageTranslate>;
|
|
529
|
+
|
|
530
|
+
// IMessageTranslate từ @libs-ui/interfaces-types:
|
|
531
|
+
// { message: string | undefined; interpolateParams?: object; }
|
|
222
532
|
```
|
|
223
533
|
|
|
224
|
-
|
|
534
|
+
**Ví dụ hàm validate async:**
|
|
225
535
|
|
|
226
|
-
|
|
227
|
-
|
|
536
|
+
```typescript
|
|
537
|
+
import { TYPE_FUNCTION_INPUT_VALID } from '@libs-ui/components-inputs-valid';
|
|
538
|
+
|
|
539
|
+
protected readonly checkUsernameAvailable: TYPE_FUNCTION_INPUT_VALID = async (value) => {
|
|
540
|
+
if (!value) return { message: undefined, interpolateParams: undefined };
|
|
541
|
+
const isTaken = await this.userService.checkUsername(value as string).toPromise();
|
|
542
|
+
return isTaken
|
|
543
|
+
? { message: 'Tên đăng nhập đã tồn tại', interpolateParams: {} }
|
|
544
|
+
: { message: undefined, interpolateParams: undefined };
|
|
545
|
+
};
|
|
546
|
+
```
|
|
228
547
|
|
|
229
|
-
##
|
|
548
|
+
## Lưu ý quan trọng
|
|
549
|
+
|
|
550
|
+
⚠️ **`item` là required model**: Bắt buộc truyền `[(item)]` với two-way binding. Không dùng `[item]` một chiều vì component ghi trực tiếp vào object thông qua `set()`.
|
|
551
|
+
|
|
552
|
+
⚠️ **`fieldNameBind` là required**: Bắt buộc phải khớp với tên trường trong object `item`. Sai tên sẽ không bind được giá trị.
|
|
553
|
+
|
|
554
|
+
⚠️ **`ignoreShowError` đã deprecated**: Dùng `ignoreShowMessageError` thay thế. `ignoreShowError` sẽ bị xóa trong phiên bản tương lai.
|
|
555
|
+
|
|
556
|
+
⚠️ **`checkIsValid()` bỏ qua validate khi readonly/disable**: Nếu `readonly` hoặc `disable` là `true`, `checkIsValid()` luôn trả về `true` mà không chạy validate.
|
|
557
|
+
|
|
558
|
+
⚠️ **Thứ tự validate**: Validate chạy theo thứ tự: required → minLength → pattern → minValue → maxValue → bigint range → maxLength → functionValid. Dừng lại ở lỗi đầu tiên.
|
|
559
|
+
|
|
560
|
+
⚠️ **`valuePatternShowError` logic ngược**: Mặc định `false` — báo lỗi khi regex KHÔNG match. Đặt `true` để báo lỗi khi regex CÓ match (VD: detect ký tự không được phép).
|
|
561
|
+
|
|
562
|
+
⚠️ **`debounceTimeValidate` chỉ áp dụng cho `outValueChange`**: Validate vẫn chạy ngay khi gọi `checkIsValid()` programmatically, bất kể debounce.
|
|
563
|
+
|
|
564
|
+
⚠️ **Selector đúng là `libs_ui-components-inputs-valid`**: Lưu ý dùng dấu gạch dưới `_` không phải gạch ngang `-` sau `libs_ui`.
|
|
565
|
+
|
|
566
|
+
## Demo
|
|
567
|
+
|
|
568
|
+
```bash
|
|
569
|
+
npx nx serve core-ui
|
|
570
|
+
```
|
|
230
571
|
|
|
231
|
-
|
|
572
|
+
Truy cập: http://localhost:4500 và tìm phần demo của `inputs-valid` trong menu Components.
|