AutoCompletePickerControlSchema

Estimated reading: 4 minutes 269 views

Hình ảnh / Demo

Link demo: https://dhgt-canbo.dttt.vn/admin/authorization/role

Mục đích

Tạo một ô input có thể gợi ý khi nhập text và có thể chọn dữ liệu từ 1 danh sách có sẵn trong form bằng cách click vào biểu tượng ở cuối cùng của control.

Cách dùng

Import

Import vào đầu file .ts cần sử dụng

				
					import { AutoCompletePickerControlSchema } from 'tnx-shared';

Cách dùng cơ bản

AutoCompletePickerControlSchema được thêm vào trong this.setting.schema khi khởi tạo form.

				
					...
ngOnInit() {
...
    this.setting.schema = [
        new AutoCompletePickerControlSchema({
            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 AutoCompletePickerControlSchema({
            field: 'myField',
            label: 'Trường muốn dùng',
            title: 'Text của nút chọn',
            baseService: 'Service để lấy dữ liệu của control',
            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) =&gt; {
                // Event fire khi tìm kiếm
                // Do something
            },
            onFormEvent: (evt: EventData) =&gt; {
                // Event fire khi thao tác với control
                // Do something
            },
            onSelectEntity: (evt: EventData) =&gt; {
                // Event fire khi chọn 1 bản ghi trong danh sách
                // Do something
            },
            onChanged: (evt: EventData) =&gt; {
                // 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) =&gt; {
                // Event fire khi khởi tạo dữ liệu của danh sách
                // Do something
            }
        })
    ]
}

Trang tài liệu Trí Nam