EntityPickerControlSchema
Hình ảnh / Demo
Mục đích
Tạo một danh sách dữ liệu trong form.
Dữ liệu được chọn và hiển thị trong control sẽ được thể hiện được nhiều thông tin hơn đến người dùng qua các trường được cấu hình.
Cách dùng
Import
Import vào đầu file .ts cần sử dụng
import { EntityPickerControlSchema } from 'tnx-shared';
Cách dùng cơ bản
TextControlSchema được thêm vào trong this.setting.schema khi khởi tạo form.
...
ngOnInit() {
...
this.setting.schema = [
new EntityPickerControlSchema({
field: 'myField',
label: 'Trường muốn dùng',
title: 'Text của nút chọn',
baseService: ,
columns: [
new EntityPickerColumn({
code: 'field1',
label: 'Trường thứ 1 của danh sách',
operator: Operator.contain
}),
new EntityPickerColumn({
code: 'field2',
label: 'Trường thứ 2 của danh sách',
operator: Operator.contain
})
]
}),
...
]
...
}
...
Note) Mặc định khi khởi tạo giá trị valueField sẽ là: ‘id’ và displayField là ‘ten’ ứng với cột ‘id‘ và ‘ten‘ trong database
Thuộc tính
Sự kiện
...
ngOnInit() {
...
this.setting.schema = [
new EntityPickerControlSchema({
field: 'myField',
label: 'Trường muốn dùng',
title: 'Text của nút chọn',
baseService: ,
columns: [
new EntityPickerColumn({
code: 'field1',
label: 'Trường thứ 1 của danh sách',
operator: Operator.contain
}),
new EntityPickerColumn({
code: 'field2',
label: 'Trường thứ 2 của danh sách',
operator: Operator.contain
})
],
onSearchFormInitialized: (evt: EventData) => {
// Event fire khi tìm kiếm
// Do something
},
onFormEvent: (evt: EventData) => {
// Event fire khi thao tác với control
// Do something
},
onSelectEntity: (evt: EventData) => {
// Event fire khi chọn 1 bản ghi trong danh sách
// Do something
},
onChanged: (evt: EventData) => {
// Event fire khi thay đổi dữ liệu của danh sách
console.log(eventData);
if (this.model.data.property) {
evt.formControls['other control name'].hidden = true;
} else {
evt.formControls['other control name'].hidden = false;
}
},
onInit: (evt: EventData) => {
// Event fire khi khởi tạo dữ liệu của danh sách
// Do something
},
...
}),
...
]
...
}
...