css - 如何使“ng-multiselect-dropdown”成为 Anguar7 中的必填字段?
问题描述
如何创建ng-multiselect-dropdown
必填字段,该字段必须接受至少一个选定项目?
<ng-multiselect-dropdown
[placeholder]="'Select countries'"
[data]="countries"
[(ngModel)]="countriesSelectedItems"
[settings]="countriesDropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
name="countries"
class="form-control">
</ng-multiselect-dropdown>
解决方案
npmjs.org上没有关于它的文档
因此,我们采用我们采取的方法在 Angular 的模板驱动表单中创建所需的任何字段。
相关的html:
<form (ngSubmit)='submission()'>
<ng-multiselect-dropdown [placeholder]="'custom placeholder'" [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings"
(onSelect)="onItemSelect($event)" (onSelectAll)="onSelectAll($event)" [required]='requiredField' [ngClass]='setClass()'
name='countrySelect'>
</ng-multiselect-dropdown>
<p *ngIf="!requiredField">
You must select a value !!
</p>
<br/>
<button type='submit'>submit</button>
</form>
相关TS:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular 5';
dropdownList = [];
selectedItems = [];
dropdownSettings = {};
requiredField: boolean = false;
ngOnInit() {
this.dropdownList = [
{ "item_id": 1, "item_text": "India" },
{ "item_id": 2, "item_text": "Singapore" },
{ "item_id": 3, "item_text": "Australia" },
{ "item_id": 4, "item_text": "Canada" },
{ "item_id": 5, "item_text": "Pakistan" },
{ "item_id": 6, "item_text": "Japan" }
];
this.selectedItems = [
{ "item_id": 2, "item_text": "Singapore" },
{ "item_id": 3, "item_text": "Australia" }
];
this.dropdownSettings = {
singleSelection: false,
idField: 'item_id',
textField: 'item_text',
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 3,
allowSearchFilter: true
};
this.setStatus();
}
setStatus() {
(this.selectedItems.length > 0) ? this.requiredField = true : this.requiredField = false;
}
onItemSelect(item: any) {
//Do something if required
this.setClass();
}
onSelectAll(items: any) {
//Do something if required
this.setClass();
}
setClass() {
this.setStatus();
if (this.selectedItems.length > 0) { return 'validField' }
else { return 'invalidField' }
}
submission() {
if (this.requiredField == false) {
/* Print a message that not all required fields were filled... */
}
/* Do form submission... */
}
}
相关的CSS:
.validField { border:2px solid green; display: block; }
.invalidField { border:2px solid red; display: block; }
::ng-deep .multiselect-dropdown .dropdown-btn {width: -webkit-fill-available !important}
::ng-deep .multiselect-dropdown .dropdown-btn:focus {outline: none !important}
此处提供完整的工作堆栈闪电战
推荐阅读
- python - pandas 中是否有一种方法可以在干净的表中显示唯一级别的数据框?
- javascript - Materialize Dropdown 隐藏在其他元素后面
- dns - 如何建立个人名称服务器
- scikit-learn - sklearn 集成的自定义 random_sampling
- vulkan - 来自存储缓冲区性能的顶点输入
- python - 全栈 Web 开发是否违反 DRY?
- java - 如何解决 Android Studio 中缺少的 androidx 组件?
- laravel - Laravel 使用自定义键配置路由
- c# - 如何使用初始字节连接到套接字
- python - Python用方向箭头绘制浮动列表