[Bug] {Form} - FormControl doesn't work with Signal Forms

[mruknowme]

Is this a regression?

No

Description

type FormModel = {
  title: string;
};

// ...

private readonly formModel = signal<FormModel>({
    title: '',
  });

myForm = form(this.formModel, (path) => {
    required(path.title, { message: 'Title is required' });
  });

<div flowbiteCard>
  <div flowbiteCardContent>
    <h5 flowbiteCardHeader>Form Name</h5>
    <div>
      <form (submit)="onSubmit($event)">
        <div flowbiteFormField>
          <label flowbiteLabel for="title"> Title </label>
          <input
            flowbiteFormControl
            id="title"
            [field]="myForm.title"
            placeholder="Enter title"
          />
        </div>
        <button type="submit">Save</button>
      </form>
      test
    </div>
  </div>
</div>

Please provide the exception or error you saw

Component update failed: Cannot read properties of undefined (reading 'pipe')
TypeError: Cannot read properties of undefined (reading 'pipe')
    at subscribeToControlStatus (http://localhost:4200/@fs/path/redacted/.angular/cache/21.0.1/project-name-redacted/vite/deps/chunk-HVZ4F7ZU.js?v=6e0f612a:58:26)
    at controlStatus (http://localhost:4200/@fs/path/redacted/.angular/cache/21.0.1/project-name-redacted/vite/deps/chunk-HVZ4F7ZU.js?v=6e0f612a:83:3)
    at setupFormControl (http://localhost:4200/@fs/path/redacted/.angular/cache/21.0.1/project-name-redacted/vite/deps/flowbite-angular_form.js?v=6e0f612a:342:18)
    at new _NgpInput (http://localhost:4200/@fs/path/redacted/.angular/cache/21.0.1/project-name-redacted/vite/deps/flowbite-angular_form.js?v=6e0f612a:909:19)
    at NodeInjectorFactory.NgpInput_Factory [as factory] (http://localhost:4200/@fs/path/redacted/.angular/cache/21.0.1/project-name-redacted/vite/deps/flowbite-angular_form.js?v=6e0f612a:917:14)
    at getNodeInjectable (http://localhost:4200/@fs/path/redacted/.angular/cache/21.0.1/project-name-redacted/vite/deps/chunk-JXYTYKTB.js?v=6e0f612a:1324:38)
    at instantiateAllDirectives (http://localhost:4200/@fs/path/redacted/.angular/cache/21.0.1/project-name-redacted/vite/deps/chunk-JXYTYKTB.js?v=6e0f612a:5169:23)
    at createDirectivesInstances (http://localhost:4200/@fs/path/redacted/.angular/cache/21.0.1/project-name-redacted/vite/deps/chunk-JXYTYKTB.js?v=6e0f612a:5028:3)
    at Module.ɵɵelementStart (http://localhost:4200/@fs/path/redacted/.angular/cache/21.0.1/project-name-redacted/vite/deps/chunk-JXYTYKTB.js?v=6e0f612a:14347:5)
    at EditStandardsTreeComponent_Template (http://localhost:4200/@ng/component?c=libs%2Fui%2Fdashboard%2Fcomponent-name-redacted%2Fsrc%2Flib%2Fcomponent-name-redacted.component.ts%40ComponentNameRedacted&t=1764372860314:15:23)
Please consider reporting the error at https://github.com/angular/angular-cli/issues

OS

Unix (Linux, macOS, etc.)

Browser

Chrome

Node version

22

Flowbite-angular version

20.1.1

Anything else?

No response

[MGREMY]

Hi @mruknowme

I'm assuming you're using angular 21 ?
For now, there is no suitable version of flowbite-angular available for angular 21.

[mruknowme]

Yep, Angular 21. Is it in the plans to release v21 support?

[MGREMY]

Yup I'm waiting for Nx to be available for angular 21. Once the version is available, I will upgrade flowbite-angular to angular 21 :)

[MGREMY]

@mruknowme I just updated the library to angular 21

I'll let this issue open if there are other problems related to it. Otherwise I'll close it later.