Validation Issue.

[Shreekumar]

I've created a reusable component using Treeview.

Here is my tree-control.component.html

<ejs-treeview #treeView [fields]=config [showCheckBox]='showCheckBox'

(nodeChecked)="valueSelected($event)"

(drawNode)="drawNode($event)" autoCheck='true'>

</ejs-treeview>

And I'm using this component in my another component (branch.component.html) as below:

<div id="treeChannel" class="enable-scroll">

     <app-tree-control *ngIf="channelFields" formControlName="channels" [config]="channelFields" [showCheckBox]="true" required>

</app-tree-control>

</div>

<div *ngIf="submitted && f.channels.errors" class="invalid-feedback">

<div *ngIf="f.channels.errors.required">

Select at least one Channel.

</div>

</div>

I'm doing this because, I'm not able to add formControlName="channels" to ejs-treeview directly.

Problem is, even if all the check-boxes are checked using the data-source, still I'm getting validation error Select at least one Channel.

Here's my Code:

export class BranchComponent implements OnInit {

// Properties for "Channels" Treeview

channels = [];

channelFields;

ngOnInit() {

this.branchPlanForm = this.objFormBuilder.group({

channels: [null, Validators.required],

});

//Calling service here and getting the data

this.channels = [{

channelId: -1,

channelName: 'All',

merchandises: response, // Service response

expanded: true

}];

this.channelFields = { dataSource: this.channels, id: 'id', text: 'name', child: 'childData' };

}

}

[Ashokkumar Balasubramanian]

Hi Shreekumar, 

 

Good day to you. 

 

We have validated the reported problem and the code snippets shared. In your code, your formcontrol value remains null even after the checkbox is clicked. Since there is no sync between the tree view’s checkbox and your form Control, you need to manually update the formControl’s status in the nodeChecked event of tree view. Please refer to the following code snippet. 

 

valueSelected(args){ 

        if (args.action == "check") { 

            this.appComponent.branchPlanForm.controls.channels.patchValue(1); 

        } 

        else if (args.action == "uncheck") { 

            if (this.tree.checkedNodes.length == 0) 

                this.appComponent.branchPlanForm.controls.channels.patchValue(null); 

        } 

    } 

 

Sample: 

 

https://www.syncfusion.com/downloads/support/forum/147841/ze/TreeView1339019172 

 

Kindly check the above sample and let us know if you need any further assistance. 

 

Regards, 

Ashokkumar B.