angular / angular/angular

Using `[formField]` with a ControlValueAccessor that internally sets `[pattern]` is broken

Open
#68,246 5 comments 0 reactions 0 assignees View on GitHub
area: forms gemini-triaged
Dominant language
TypeScript
Stars
101k
Forks
27.5k
Avg merge
1d 19h
Merged PRs (30d)
288

Description

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

forms

### Is this a regression?

No

### Description

Using `[formField]` with a ControlValueAccessor that internally sets `[pattern]` is broken

The pattern passed to the validator is an empty array which is treated as a RegExp by the validator and then throws.

### Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-21-base-3fumjak2

### Please provide the exception or error you saw

```true
ERROR TypeError: regex.test is not a function
at _PatternValidator._validator (forms.mjs:343:18)
at _PatternValidator.validate (forms.mjs:4052:17)
at forms.mjs:386:66
at forms.mjs:379:38
at Array.map ()
at executeValidators (forms.mjs:379:21)
at forms.mjs:394:24
at forms.mjs:379:38
at Array.map ()
at executeValidators (forms.mjs:379:21)
```

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

```true
❯ ng version

_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/

Angular CLI : 21.2.7
Angular : 21.2.9
Node.js : 22.22.0
Package Manager : npm 10.8.2
Operating System : linux x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/animations │ 21.2.9 │ ^21.2.0 │
│ @angular/build │ 21.2.7 │ ^21.2.0 │
│ @angular/cli │ 21.2.7 │ ^21.2.0 │
│ @angular/common │ 21.2.9 │ ^21.2.0 │
│ @angular/compiler │ 21.2.9 │ ^21.2.0 │
│ @angular/compiler-cli │ 21.2.9 │ ^21.2.0 │
│ @angular/core │ 21.2.9 │ ^21.2.0 │
│ @angular/forms │ 21.2.9 │ ^21.2.0 │
│ @angular/platform-browser │ 21.2.9 │ ^21.2.0 │
│ @angular/router │ 21.2.9 │ ^21.2.0 │
│ rxjs │ 7.8.2 │ ^7.8.1 │
│ typescript │ 5.9.3 │ ^5.9.3 │
└───────────────────────────┴───────────────────┴───────────────────┘
```

### Anything else?

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the forms package and reproduce the failure using the linked StackBlitz example, then trace the stack through _PatternValidator and executeValidators. Done means the same form-field and ControlValueAccessor combination no longer throws "regex.test is not a function" when the internal pattern is applied.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
64/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.