Using `[formField]` with a ControlValueAccessor that internally sets `[pattern]` is broken
- 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
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