![](/img/trans.png)
[英]How to customize dropdown button in dx-toolbar (DevExtreme)?
[英]How to add required validation in dx-list of devextreme control for angular?
我想在 angular 的 devextreme 控件的 dx-list 中添加必填字段驗證。
這是我的 html 片段。
<dx-list class="checkbox-list" id="chkCentreCareTypes" [dataSource]="careTypes" (onSelectionChanged)="onCareTypeChanged($event)"
selectionMode="multiple" displayExpr="text" valueExpr="value" [showSelectionControls]="true">
</dx-list>
而這個的Output如下。
一切都始於以下概念; DxList 不被視為 ui 編輯,因此 dxValidate 不會自然地為它工作。
所以你需要為它設計一個自定義驗證。
以下是有關如何執行此操作的簡單代碼。
html
<dx-list #listx>
<dx-validator [adapter]="adapterConfig" validationGroup="validationGroup">
<dxi-validation-rule type="custom" [validationCallback]="validationCallback"></dxi-validation-rule>
</dx-validator>
</dx-list>
ts
@ViewChild("listx", {static: false}) listx: DxListComponent;
borderStyle: string = "none";
adapterConfig = {
getValue: () => {
return this.listx?.selectedItems?.length; //-- value to be validated
},
applyValidationResults: (e) => {
this.borderStyle = e.isValid ? "none" : "1px solid red";
}
};
validationCallback(params) {
return params.value!=0;
}
包括復位 function
adapterConfig = {
getValue: () => {
return this.listx?.selectedItems?.length; //-- value to be validated
},
applyValidationResults: (e) => {
this.borderStyle = e.isValid ? "none" : "1px solid red";
},
reset: () => {
this.fluxoItems;
}
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.