angular / angular/angular

Signal Forms [formField]: compiler only checks one direction, allowing unsound union FormValueControl bindings

未关闭
#70,093 5 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
area: forms forms: signals
主要语言
TypeScript
星标
101k
派生
27.5k
平均合并
1 天 19 小时
30 天内合并 PR
288

描述

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

compiler, forms

### Is this a regression?

No

### Description

A custom control implementing `FormValueControl` with a union value type silently
accepts a `[formField]` binding to a field whose type is only one member of that union.
The control can then write the other member into the field, changing the runtime shape
of the developer's model signal with no diagnostic at any point.
```ts
// App.ts
myModel = signal<{roles:string}>({roles:''})
myForm = form(this.myModel)
```
```html

```
```ts
// select.ts
export class MySelect
implements FormValueControl
{
readonly value = model();

```
> now i click a button changeToArray in the app-select component
```ts
//select.ts
changeToArray() {
this.value.set(['a', 'b']);
}
```


After the control calls `value.set(['a','b'])`, the source signal holds
`{ roles: ['a','b'] }` even though `roles` is declared `string`.

### So i can see runtime Type mainpulation happens

#### Questions:
so i did look at the code base abit and i found this
the customControlCreate where i thought it has no real inheritance of the `FormField` not generic where it can be passed

Image

> i opened the function it self, it has the parent as `FormField`
Image

honstly i did think abit with Gemini and reialized this might be not the fix
then gemini said, it is compiler issue and it did generate some suggestion fixes, Iam not an expert in this, so i made an artifact, I thought this **might help you guys And upload it**, so you can access it

**From here : => [angular-bug-Artifact](https://angular-bug.pplx.app/)**

Image

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

https://stackblitz.com/edit/stackblitz-starters-nqxpezvp?file=package.json

### Please provide the exception or error you saw

```true
No, error were fired
```

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

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

Angular CLI : 22.1.3
Angular : 22.1.0
Node.js : 22.22.3
Package Manager : npm 10.8.2
Operating System : linux x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/aria │ 22.1.1 │ ^22.1.1 │
│ @angular/build │ 22.1.3 │ ^22.1.0 │
│ @angular/cli │ 22.1.3 │ ^22.1.0 │
│ @angular/common │ 22.1.0 │ ^22.1.0 │
│ @angular/compiler │ 22.1.0 │ ^22.1.0 │
│ @angular/compiler-cli │ 22.1.0 │ ^22.1.0 │
│ @angular/core │ 22.1.0 │ ^22.1.0 │
│ @angular/forms │ 22.1.0 │ ^22.1.0 │
│ @angular/platform-browser │ 22.1.0 │ ^22.1.0 │
│ @angular/router │ 22.1.0 │ ^22.1.0 │
│ rxjs │ 7.8.2 │ ^7.8.1 │
│ typescript │ 6.0.3 │ ~6.0.3 │
└───────────────────────────┴───────────────────┴───────────────────┘
```

### Anything else?

_No response_

贡献指南

打开贡献指南

调研方向

先从 StackBlitz 复现及其 package.json 开始,然后检查 App.ts 和 select.ts 中所示的 [formField] 绑定周围的编译器和 Forms 行为。复现联合绑定,并验证无效的单成员字段会收到编译器诊断,而有效绑定仍会被接受。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
compilers, frontend
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
冷清
描述清晰度
基本清楚
新手友好度
48/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。