We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Validation Issue.

I've created a reusable component using Treeview.

Here is my tree-control.component.html
<ejs-treeview #treeView [fields]=config [showCheckBox]='showCheckBox'
(drawNode)="drawNode($event)" autoCheck='true'>

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>
<div *ngIf="submitted && f.channels.errors" class="invalid-feedback">
<div *ngIf="f.channels.errors.required">
Select at least one Channel.

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 = [];
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' };

1 Reply

AB Ashokkumar Balasubramanian Syncfusion Team September 27, 2019 06:57 AM

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. 
        if (args.action == "check") { 
        else if (args.action == "uncheck") { 
            if (this.tree.checkedNodes.length == 0) 
Kindly check the above sample and let us know if you need any further assistance. 
Ashokkumar B. 

Live Chat Icon For mobile
Up arrow icon