Skip to content

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

@mruknowme

Description

@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

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions