如何在 dx-list 的 devextreme 控制中为 Angular 添加所需的验证？答案

【问题标题】：How to add required validation in dx-list of devextreme control for angular?如何在 dx-list 的 devextreme 控制中为 Angular 添加所需的验证？
【发布时间】：2018-08-20 07:34:22
【问题描述】：

我想在 Angular 的 devextreme 控件的 dx-list 中添加必填字段验证。

这是我的 html sn-p。

<dx-list class="checkbox-list" id="chkCentreCareTypes" [dataSource]="careTypes" (onSelectionChanged)="onCareTypeChanged($event)"
                                    selectionMode="multiple" displayExpr="text" valueExpr="value" [showSelectionControls]="true">
                                </dx-list>

输出如下。

【问题讨论】：

标签： javascript angular typescript devextreme

【解决方案1】：

一切都从以下概念开始； 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>

@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;
}

【讨论】：