Tree Select Component

[esoftware-github]

Hello,
I have the following TreeSelect component, but when I populate it with a JSON object and use the formControlName, when I select an item, it displays the text "empty" inside the treeSelect, and when I retrieve the value linked to the formControlName, the related text doesn't appear in the TreeSelect; only the text 'empty' is displayed.

menuNodes!: any[];

oForm!: FormGroup;

 this.oForm = this.fb.group({
      MenuID: [0],
      MenuName: ['', [Validators.required]],
      ParentMenuID: [null],
      Sequence: [0, [Validators.required]],
      Url: [''],
      IsActive: [true],
      IsDeleted: [false],
      CreatedBy: ['']
    });


this.menuService.onGetMenuTree().subscribe((data) => (this.menuNodes = data));


<div [formGroup]="oForm">
<p-treeSelect
          id="ParentMenuID"
          class="md:w-20rem w-full"
          containerStyleClass="w-full"
          placeholder="Select Item"
          [options]="menuNodes"
         formControlName="ParentMenuID"
        ></p-treeSelect>
</div>

I am preparing an example since I suggested using PrimeNG for our Angular development, and I need your assistance. Thank you very much.

[cetincakiroglu]

Hi,

Could you please share a stackblitz example so we can identify the issue?

[esoftware-github]

Hello, this is the link,

https://stackblitz.com/edit/stackblitz-starters-lmjot8?file=src%2Ftest-tree-select%2Ftest-tree-select.component.ts

but I couldn't configure primeng

There is a button that when clicked, sets the element to the indicated value and is seen in the treeselect

[esoftware-github]

Hello friends,
I would like to know what the equivalent of Dropdown would be, where I tell you what to show and what to capture and what I capture is what goes to the model

<form [formGroup]="formGroup">
    <p-dropdown formControlName="city" [options]="cities" optionLabel="name"></p-dropdown>
</form>

[esoftware-github]

I share the solution I gave and if you know another way I would appreciate it.

I thought that by passing the id to which the formControlName is related, its label would automatically be displayed. I am new to frontend, so I started reading the documentation and based on that, I did the following

I have created a function that searches for the nodes

findTreeSelectNodeByKey(nodes: any[], keyToFind: string): any | null {
    for (const node of nodes) {
      if (node.key === keyToFind) {
        return node;
      }
      if (node.children && node.children.length > 0) {
        const foundNode = this.findTreeSelectNodeByKey(node.children, keyToFind); // Llamada recursiva
        if (foundNode) {
          return foundNode;
        }
      }
    }
    return null;
  }

and when using the function it returns the node and I assign it to the variable of my formgroup

this.oForm = this.fb.group({
      MenuID: [0],
      MenuName: ['', [Validators.required]],
      ParentMenuID: [null],
      Sequence: [0, [Validators.required]],
      Url: [''],
      IsActive: [true],
      IsDeleted: [false],
      CreatedBy: ['']
    });

this.menuService.onGetById(parseInt(param)).subscribe((entity) => {        
          this.oForm.patchValue(entity);          
          const node = this.commonService.findTreeSelectNodeByKey(this.menuNodes, entity.ParentMenuID.toString());
          this.oForm.controls["ParentMenuID"].setValue(node);
        });

When I do this it no longer shows me the text empty, in the treeselect component

[cetincakiroglu]

Hi,

Your example does not start please create a new one by forking this example https://stackblitz.com/edit/vmjy3y?file=src%2Fapp%2Fdemo%2Ftree-select-basic-demo.ts