CheckboxListControlSchema

Estimated reading: 4 minutes 506 views

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) =&gt; this.getSoNgayNghi(evt.parentModel)
}),

Trang tài liệu Trí Nam