CheckboxListControlSchema
Hình ảnh / Demo
link demo (trong form thêm, sửa): Danh sách nghỉ phép - TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI (dttt.vn)
Mục đích
Tạo 1 group checkbox trong form
Cách dùng
Import
Import vào đầu file .ts cần sử dụng
import { CheckBoxListControlSchema } from 'tnx-shared';
Cách dùng cơ bản
CheckBoxListControlSchema được thêm vào trong this.setting.schema khi khởi tạo form.
...
ngOnInit() {
...
this.setting.schema = [
new CheckBoxListControlSchema({
field: 'arrNgayNghi',
label: 'Không tính ngày',
dataSource: [
{ id: '1', ten: 'Thứ 7' },
{ id: '2', ten: 'Chủ nhật' },
{ id: '3', ten: 'Ngày lễ' }
]
}),
...
]
...
}
...
Tùy chỉnh chiều hiển thị
...
new CheckBoxListControlSchema({
field: 'arrNgayNghi',
label: 'Không tính ngày',
layout: 'vertical',
dataSource: [
{ id: '1', ten: 'Thứ 7' },
{ id: '2', ten: 'Chủ nhật' },
{ id: '3', ten: 'Ngày lễ' }
]
}),
...
Khi muốn hiển thị field theo chiều dọc dùng thuộc tính layout: ‘vertical’, mặc định ban đầu sẽ là horizontal(chiều ngang)
Tùy chỉnh css
Thêm thuộc tính classPlus để chèn thêm class vào từng checkbox
...
new CheckBoxListControlSchema({
field: 'arrNgayNghi',
label: 'Không tính ngày',
classPlus: 'demo666',
dataSource: [
{ id: '1', ten: 'Thứ 7' },
{ id: '2', ten: 'Chủ nhật' },
{ id: '3', ten: 'Ngày lễ' }
],
}),
...
Gán giá trị mặc định khi khởi tạo
...
new CheckBoxListControlSchema({
field: 'arrNgayNghi',
label: 'Không tính ngày',
defaultValue: EnumLoaiNgayNghi.CHU_NHAT,
dataSource: LoaiNgayNghiDatasource
}),
...
Thêm thuộc tính defaultValue để gán giá trị mặc định khi khởi tạo
Sự kiện
new CheckBoxListControlSchema({
field: 'arrNgayNghi',
label: 'Không tính ngày',
layout: 'vertical',
classPlus: 'demo666',
dataSource: [
{ id: '1', ten: 'Thứ 7' },
{ id: '2', ten: 'Chủ nhật' },
{ id: '3', ten: 'Ngày lễ' }
],
onChanged: (evt: EventData) => this.getSoNgayNghi(evt.parentModel)
}),