MaskControlSchema

Estimated reading: 4 minutes 242 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) =&gt; {
        if (!evt.rootModel.tongKinhPhi || !evt.currentNode.model) {
            return;
        }
        evt.rootModel.kinhPhiDHH = Number(evt.rootModel.tongKinhPhi) - Number(evt.currentNode.model);
    }
}),

Trang tài liệu Trí Nam