How to add required validation in dx-list of devextreme control for angular?

Question

I want to add required field validation in dx-list of devextreme control for angular.

Here is my html snippet.

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

And Output of this is as follows.

Answer 1

Everything starts with the following concept; DxList is not considered a ui edit, so dxValidate will not work naturally for it.

So you need to devinis a custom validation for it.

Below is a simple code on how to do this.

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

Answer 2

Include reset 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;
   }
};