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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Validation Issue.

Thread ID:

Created:

Updated:

Platform:

Replies:

147841 Sep 25,2019 01:55 PM UTC Sep 27,2019 11:57 AM UTC Angular - EJ 2 1
loading
Tags: Treeview
Shreekumar
Asked On September 25, 2019 01:55 PM UTC

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 [Syncfusion]
Replied On September 27, 2019 11:57 AM UTC

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: 
 
 
Kindly check the above sample and let us know if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon