Error with TreeSelect and a two-level list of options

[Dodochantrel]

Hi !

I want to create a TreeSelect that accepts a two-level list of items, but I get an error when I select an item from the list:

Here is my code:

Parent component : "app-create-company-first-step"

@Component({
  selector: 'app-create-company-first-step',
  imports: [InputText, InputSiret, InputActivitySector],
  templateUrl: './create-company-first-step.html',
  styleUrl: './create-company-first-step.css',
})
export class CreateCompanyFirstStep {
  form = model.required<CompanyForm>();
}

<app-input-activity-sector [field]="form().companyForm.activitySector" label="Secteur d'activité" icon="business"
    placeholder="Sélectionnez un secteur" placeHolder="Sélectionnez un secteur" />

Child component "app-input-activity-sector" :

@Component({
  selector: 'app-input-activity-sector',
  imports: [TreeSelectModule, IconFieldModule, InputIconModule, InputErrorMessage, FormsModule, FormField],
  templateUrl: './input-activity-sector.html',
  styleUrl: './input-activity-sector.css',
})
export class InputActivitySector {
  protected activitySectors: TreeNode[] = activitySectors;
  label = input<string | null>(null);
  icon = input.required<string>();
  placeholder = input.required<string>();
  field = input<FieldTree<unknown, string | number, "writable"> | null>(null);
}

@if (label()) { <label class="label">{{ label() }}</label> }
    <p-iconfield>
        <p-inputicon>
            <span class="material-symbols text-[18px]!">{{ icon() }}</span>
        </p-inputicon>
        <p-treeselect [options]="activitySectors" [formField]="field()!" [placeholder]="placeholder()" fluid 
            [pt]="{ label: { class: 'pl-[calc((var(--p-form-field-padding-x)*2)+var(--p-icon-size))]' } }" />
    </p-iconfield>
    <app-input-error-message [field]="field()!" />

form file :

export type CompanyFormModel = {
    id: string;
    companyName: string;
    tradeName: string;
    companyLegalForm: LegalForm;
    activitySector: string;
    siret: string;
    contact: ContactFormModel;
    site: SiteFormModel;
};

export const createCompanyFormModel = (): CompanyFormModel => ({
    id: '',
    companyName: '',
    tradeName: '',
    companyLegalForm: 'SARL',
    activitySector: '',
    siret: '',
    contact: createContactFormModel(),
    site: createSiteFormModel(),
});

export class CompanyForm {
  constructor() {}

  initialValues = signal<CompanyFormModel>(createCompanyFormModel());

  companyForm = form(this.initialValues, (schemaPath) => {
  });
}

activitySectors, which contains the list of options in the tree :

export const activitySectors: TreeNode[] = [
  {
    label: 'Maçonnerie',
    key: 'masonry',
    data: 'masonry',
    selectable: false,
    children: [
      { label: 'Maçonnerie générale', key: 'general-masonry', data: 'general-masonry' },
      { label: 'Béton armé', key: 'reinforced-concrete', data: 'reinforced-concrete' },
      { label: 'Coffrage', key: 'formwork', data: 'formwork' },
      { label: 'Ferraillage', key: 'reinforcement', data: 'reinforcement' },
    ],
  },
  {
    label: 'Terrassement & VRD',
    key: 'earthworks-vrd',
    data: 'earthworks-vrd',
    selectable: false,
    children: [
      { label: 'Terrassement', key: 'earthworks', data: 'earthworks' },
      { label: 'Nivellement', key: 'grading', data: 'grading' },
    ],
  },
  ...

Versions :

"dependencies": {
    "@angular/common": "^22.1.2",
    "@angular/compiler": "^22.1.2",
    "@angular/core": "^22.1.2",
    "@angular/forms": "^22.1.2",
    "@angular/platform-browser": "^22.1.2",
    "@angular/platform-server": "^22.1.2",
    "@angular/router": "^22.1.2",
    "@angular/ssr": "^22.1.4",
    "@primeicons/angular": "^8.0.0",
    "@primeuix/themes": "^3.0.0",
    "express": "^5.1.0",
    "primelocale": "^2.4.0",
    "primeng": "^22.1.0",
    "rxjs": "~7.8.0",
    "tailwindcss-primeui": "^0.6.1",
    "tslib": "^2.3.0"
  }

Thank you in advance!

[Junaid-PK]

The two tree levels are not the problem. The binding writes the wrong runtime shape into the Signal Forms model.

Your field is a string, but PrimeNG TreeSelect emits the selected TreeNode object: the Tree sets its single selection to node (source), and TreeSelect passes that object directly to its ControlValueAccessor callback (source). The data: "general-masonry" property does not make TreeSelect emit that string.

That changes activitySector from a string leaf into a TreeNode object while Angular is maintaining its field tree, which explains the recursive signal stack. Keep the form model primitive and adapt the TreeSelect value:

import { TreeNode } from "primeng/api";
import { FieldTree } from "@angular/forms/signals";

field = input.required<FieldTree<string>>();
selectedSector: TreeNode | null = null;

selectSector(event: { node: TreeNode }): void {
    const key = event.node.key;

    if (key != null) {
        const targetField = this.field();
        targetField().value.set(String(key));
    }
}

<p-treeselect
    [options]="activitySectors"
    [(ngModel)]="selectedSector"
    [ngModelOptions]="{ standalone: true }"
    (onNodeSelect)="selectSector($event)"
    [placeholder]="placeholder()"
    fluid
/>

Remove [formField] from p-treeselect; the separate ngModel holds the TreeNode expected by PrimeNG, while the handler writes only its key into your activitySector: string field. Angular documents field().value.set(...) as the supported programmatic update path, which also updates the underlying model (Signal Forms API).

If this component also edits existing data, initialize selectedSector by finding the node whose key equals the current field string. The important invariant is that a TreeNode never gets written into the string-valued Signal Forms model.