signal forms: string | null type is giving compile error, type errors while using it with primeng components

Which @angular/* package(s) are the source of the bug?

compiler, forms

Is this a regression?

Yes

Description

Form data type like this was working earlier, but now it gives type error:

interface LoginData {
  email: string | null;
  password: string | null;
  rememberMe: boolean;
}

Form:

 loginModel = signal<LoginData>({
    email: null,
    password: null,
    rememberMe: false,
  });

  loginForm = form(this.loginModel);

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/f6b2smnv?file=package.json,src%2Fapp%2Fapp.ts,src%2Fapp%2Fapp.html

Please provide the exception or error you saw

[ERROR] TS2322: Type '`0x${string}` | null' is not assignable to type 'string'.
  Type 'null' is not assignable to type 'string'. [plugin angular-compiler]

Please provide the environment you discovered this bug in (run `ng version`)

Angular CLI       : 21.1.0
Angular           : 21.1.0
Node.js           : 20.19.1
Package Manager   : npm 10.8.2
Operating System  : linux x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build            │ 21.1.0            │ 21.1.0            │
│ @angular/cli              │ 21.1.0            │ 21.1.0            │
│ @angular/common           │ 21.1.0            │ 21.1.0            │
│ @angular/compiler         │ 21.1.0            │ 21.1.0            │
│ @angular/compiler-cli     │ 21.1.0            │ 21.1.0            │
│ @angular/core             │ 21.1.0            │ 21.1.0            │
│ @angular/forms            │ 21.1.0            │ 21.1.0            │
│ @angular/platform-browser │ 21.1.0            │ 21.1.0            │
│ @angular/router           │ 21.1.0            │ 21.1.0            │
│ rxjs                      │ 7.8.2             │ ~7.8.0            │
│ typescript                │ 5.9.3             │ ~5.9.3            │
│ zone.js                   │ 0.16.0            │ ~0.16.0           │
└───────────────────────────┴───────────────────┴───────────────────┘

Anything else?

Also getting one other type error after 21.1.0 update (was working fine with 20.0.7 formField change), but not tried it in stackblitz so not reporting yet, getting following error with for p-datepicker component (field type Date | null):

Type 'readonly RegExp[]' is not assignable to type 'string'.ngtsc(2322)
declare (property) FormField<Date | null>.formField: InputSignal<FieldTree<Date | null, string | number>>

The official answer about using null:

Generally, you should not use null as the model value for a text input that's bound to a or <textarea>. Use the empty string instead.

source

However as it's still pretty common in project (not stating it's a good idea), there might be some way to enhance the developer experience on such a situation.

I had not checked that issue before but this is from official doc:

For optional fields, explicitly set them to null or an empty value:

interface UserData {
  name: string;
  email: string;
  phoneNumber: string | null;
}
const userModel = signal<UserData>({
  name: '',
  email: '',
  phoneNumber: null,
});

Also this is not the major issue for me, for us it stopped compiling with custom Primeng component like p-inputNumber , p-datePicker after 21.1.0, it is giving following error:

Type 'readonly RegExp[]' is not assignable to type 'string'

it was working fine with 21.0.7, if this is intended will need to remove signal forms usage, I was using it for trial in one of the form. (update: it was working fine till compile-cli 21.0.8).

The impossibility of using null in real development makes signal forms useless for it.

Minimal reproduction of the bug with PrimeNg date-picker :

https://stackblitz.com/edit/github-vreuub4v-w9mdqzwa?file=package.json,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

~~It looks like the issues with the primeNg components is solved. The null issue is already tracked by #65454.~~

@JeanMeche

Hi @JeanMeche it seems type issue with PrimeNG and signal form is not resolved yet, for some unknown reason it now works in above stackblitz but on local it still gives same error, here is the minimal reproduction:
https://github.com/imaksp/ng-issue-66570

Steps:

clone and run pnpm install && pnpm start
remove $any form form component template and check the compile errors.

I have tested it with 21.1.4 and 21.2.0-next.3.

@imaksp

Hi @imaksp, @JeanMeche, it was working on above stackblitz cause for some reasons, i accidently removed the angular compiler option "strictTemplates: true". By adding it again, the compiling error is back !

The error I'm seeing is unrelated to null: TS2322: Type 'readonly RegExp[]' is not assignable to type 'string'. Is this the error in question?

The error I'm seeing is unrelated to null: TS2322: Type 'readonly RegExp[]' is not assignable to type 'string'. Is this the error in question?

yes

just updated to 21.1.5 and ran into the same issue. Is there a workaround or a fix available?

just updated to 21.1.5 and ran into the same issue. Is there a workaround or a fix available?

workaround is [formField]="$any(...)"

The issue still persists.

Any updates on the topic?

Still an issue on Angular v.21.2.11.

This doesn't compile... I get "Type 'readonly RegExp[]' is not assignable to type 'string'.ngtsc(2322)"
<p-select [options]="dropdownOptions" [formField]="item.reportTypeId" optionLabel="label" placeholder="Select a Type" class="w-full" />

This works
<p-select [options]="dropdownOptions" [formField]="$any(item.reportTypeId)" optionLabel="label" placeholder="Select a Type" class="w-full" />

FWIW, After PrimeNG moved to closed source license based model we switched to our own form components for some (app-select, app-checkbox etc ) using ControlValueAccessor, and it works without $any hack, also apparently PrimeNG has added signal forms support in v22, so this should be lower priority now, but string | null or Date | null type should work (as per #69624 it doesn't).

Navigation Menu

Repository navigation

signal forms: string | null type is giving compile error, type errors while using it with primeng components #66570

Which @angular/* package(s) are the source of the bug?

Is this a regression?

Description

Please provide a link to a minimal reproduction of the bug

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run `ng version`)

Anything else?

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

signal forms: string | null type is giving compile error, type errors while using it with primeng components #66570

Description

Which @angular/* package(s) are the source of the bug?

Is this a regression?

Description

Please provide a link to a minimal reproduction of the bug

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

Anything else?

Activity

geromegrignon commented on Jan 15, 2026

imaksp commented on Jan 15, 2026

Konctantin commented on Jan 16, 2026

Flaal commented on Jan 16, 2026

JeanMeche commented on Feb 12, 2026

imaksp commented on Feb 12, 2026

Flaal commented on Feb 12, 2026

alxhub commented on Feb 12, 2026

imaksp commented on Feb 13, 2026

bigbasti commented on Feb 20, 2026

menelai commented on Mar 2, 2026

JeevanMahesha commented on Mar 29, 2026

DenisBalan commented on Apr 24, 2026

LightBulbIdea commented on May 6, 2026

imaksp commented on Jul 2, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Please provide the environment you discovered this bug in (run `ng version`)