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

Subscribe to this post

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

}

Reply | Reply with quote

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:

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.

Reply | Reply with quote

Validation Issue.

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US