CheckboxControlSchema

Estimated reading: 3 minutes 289 views

/*! elementor – v3.7.6 – 15-09-2022 */
.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=”.svg”]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}
/*! elementor – v3.7.6 – 15-09-2022 */
.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}

Hình ảnh / Demo

Mục đích

Tạo 1 input type checkbox

Cách dùng

Import

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

				
					import { CheckboxControlSchema } from 'tnx-shared';

Cách dùng cơ bản

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

				
					...
ngOnInit() {
...
this.setting.schema = [
    new CheckboxControlSchema({
        field: 'isThanhVienNgoaiTruong',
        label: 'Ngoài trường',
    }),
  ...
]
...
}
...

Gán giá trị mặc định

				
					
new CheckboxControlSchema({ 
    field: 'isThanhVienNgoaiTruong',
    label: 'Ngoài trường',
    defaultValue: true,
}),

Khi muốn gán giá trị mặc định lúc khởi tạo thì truyền thêm defaultValue: boolean, mặc định là false

Tùy chỉnh chiều rộng của field

				
					...
new CheckboxControlSchema({
  field: 'myField',
  label: 'Trường muốn dùng',
  width: '100px'
}),
...

Khi muốn cấu hình lại chiều rộng của field dùng thuộc tính width

Thuộc tính

Thuộc tính	Kiểu dữ liệu	Mặc định	Mô tả
field	string		Trường tương ứng trong bảng
label	string		Label hiển thị trên control
gWidth	number	12	Độ rộng của control hiển thị trong form đối với màn hình lớn hớn desktops. Giá trị từ 1 – 12, mặc định là 12.(giống xl trong bootstrap)
mdWidth	number	6	Độ rộng của control hiển thị trong form đối với màn hình desktop. Giá trị từ 1->12, mặc định là 6.(giống md-lg trong bootstrap)
required	boolean	false	Tùy chỉnh ô này có bắt buộc nhập hay không
defaultValue	string		Giá trị mặc định của field
disabled	boolean	false	Vô hiệu hóa nhập giá trị
showLabel	boolean	true	Tùy chỉnh hiển thị label trên input
hiddenLabel	boolean	false	Tùy chỉnh ẩn-hiển label control
hidden	boolean	false	Ẩn field

Sự kiện

Tên sự kiện	Tham số	Mô tả
onChanged	eventData: EventData	Sự kiện khi text trong input thay đổi và blur ra ngoài
hiddenCheck	rootModel,currentNode	Sự kiện ẩn field đi, return boolean

				
					
  new CheckboxControlSchema({
      field: 'myField',
      label: 'Trường muốn dùng',
      onChanged: (eventData: EventData) => {
        console.log(eventData);
        if (this.model.data.property || <>) {
            evt.formControls['other control name'].hidden = true;
        } else {
        evt.formControls['other control name'].hidden = false;
        }
      }
  })

Trang tài liệu Trí Nam