[v21.0.0-beta.1] Textarea & Signal Forms Incompatability

[rd-wm]

Describe the bug

Textarea is incompatable with Angular 21's Signal Forms due to the this.ngControl.valueChanges subscription in Textarea's onInit:

ERROR TypeError: can't access property "subscribe", this.ngControl.valueChanges is undefined
    onInit primeng-textarea.mjs:175
    ngOnInit primeng-basecomponent.mjs:205

Pull Request Link

No response

Reason for not contributing a PR

• [x] Lack of time
• [ ] Unsure how to implement the fix/feature
• [ ] Difficulty understanding the codebase
• [ ] Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/github-5aqhxhtg?file=src%2Fapp%2Fapp.component.ts

Environment

N/A

Angular version

21.0.0

PrimeNG version

v20

Node version

22.17.0

Browser(s)

No response

Steps to reproduce the behavior

1. Use Angular 21's new Signal Forms
2. Use PrimeNG's textarea
3. Observe the console error in browser

Expected behavior

Should be compatible

[mertsincan]

After reviewing the Angular issue tracker, it seems that there are still many ongoing changes related to form signals. We may need to wait a bit longer until things become more stable. https://x.com/cagataycivici/status/1993708826713845943

[rhegner]

This is still broken with RC1

[rhegner]

Still not working with 21.0.1

[rhegner]

Still broken with 21.0.2

[rd-wm]

Shame that it is taking so long to review #19177. Quick win to be had.

[3Mowafy]

You can resolve this issue for now by replacing pTextarea with pInputText.

Example:

<textarea
  rows="5"
  cols="30"
  pInputText
  [field]="signalFormProperty.fieldName">
</textarea>

Make sure you import the required modules and types:

import { InputTextModule } from 'primeng/inputtext';
import { Field } from '@angular/forms/signals';

This works because pTextarea does not currently support binding with Field from @angular/forms/signals, while pInputText does.

[vmuresanu]

@3Mowafy and if you replace pTextArea with pInputText and your text area has for example [autoResize]="true", you will get a compilation error - Can't bind to 'autoResize' since it isn't a known property of 'textarea'. Not to mention that rows and cols that you specified in you example also won't apply visually since it's not a textarea, it's a regular input. So, this is not a good solution.

[3Mowafy]

@vmuresanu

You’re correct that pInputText is not a drop-in replacement for pTextarea, and it does not support autoResize, rows, or cols since it’s an input, not a textarea.

However, a few clarifications:

Resize behavior

The resize handle is provided by the native textarea via CSS, not by PrimeNG.
autoResize in pTextarea only controls automatic height adjustment based on content; it does not enable or disable manual resizing.

If the goal is to disable resizing, this can be done cleanly via CSS (e.g. Tailwind):

<textarea class="resize-none"></textarea>

rows and cols

rows and cols work as expected on a textarea and define its initial dimensions.
If they don’t appear visually, it’s typically due to CSS overrides, not because the attributes are unsupported.

Summary:

• autoResize ≠ resize
• Resize is controlled via CSS
• rows and cols are native and fully functional on textarea
• Clear separation between behavior (PrimeNG) and styling (CSS/Tailwind)