MaskControlSchema
Estimated reading: 4 minutes
269 views
Hình ảnh / Demo
Mục đích
Dùng để tạo 1 ô input nhập số lượng, giá tiền
Cách dùng
Import
Import vào đầu file .ts cần sử dụng
import { MaskControlSchema } from 'tnx-shared';
Cách dùng cơ bản
MaskControlSchema được thêm vào trong this.setting.schema khi khởi tạo form.
...
ngOnInit() {
...
this.setting.schema = [
new MaskControlSchema({
label: 'Kinh phí khác',
fullLabel: 'Kinh phí khác',
dataFormat: 'moneyint',
field: 'kinhPhiKhac',
mdWidth: 3,
}),
...
]
...
}
...
Tùy chỉnh chèn thêm label vào trước hoặc sau field
new MaskControlSchema({
label: 'Kinh phí khác',
fullLabel: 'Kinh phí khác',
field: 'kinhPhiKhac',
dataFormat: 'moneyint',
suffix: 'demo2',
prefix: 'demo1',
mdWidth: 3,
}),
Khi cần chèn thêm label cho field thêm thuộc tính: +) suffix: chèn thêm label vào bên phảifield
+) prefix: chèn thêm label vào bên trái field
Validate với những control khác
new MaskControlSchema({
label: 'Kinh phí khác',
fullLabel: 'Kinh phí khác',
maskType: 'decimal',
field: 'kinhPhiKhac',
dataFormat: 'moneyint',
suffix: 'VNĐ',
validators: [
new CompareValidator(Operator.lowerThanEqual, 'tongKinhPhi'), // tham số gồm: toán tử so sánh, control dùng để so sánh với
]
}),
validate value phải nhỏ hơn hoặc bằng so với value của control 'tongKinhPhi'
Tùy chỉnh cho phép nhập số thập phân
new MaskControlSchema({
label: 'Kinh phí khác',
fullLabel: 'Kinh phí khác',
field: 'kinhPhiKhac',
dataFormat: 'moneyint',
mdWidth: 3,
maskType: 'decimal',
decimalPlaces: 3 // tùy số lượng số sau dấu phẩy
}),
Thêm thuộc tính maskType: ‘decimal’
Sự kiện
new MaskControlSchema({
label: 'Kinh phí khác',
fullLabel: 'Kinh phí khác',
maskType: 'decimal',
decimalPlaces: 4,
field: 'kinhPhiKhac',
dataFormat: 'moneyint',
suffix: 'VNĐ',
validators: [
new CompareValidator(Operator.lowerThanEqual, 'tongKinhPhi'),
],
onChanged: (evt: EventData) => {
if (!evt.rootModel.tongKinhPhi || !evt.currentNode.model) {
return;
}
evt.rootModel.kinhPhiDHH = Number(evt.rootModel.tongKinhPhi) - Number(evt.currentNode.model);
}
}),