ionic-team / ionic-team/ionic-framework

feat(angular): support markAsTouched() for angular signal forms

未关闭
#31,405 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
triage
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.

### Describe the Feature Request

I already took a look at https://github.com/ionic-team/ionic-framework/issues/30805 and I think Ionic currently doesn't support the `markAsTouched()` use case despite the opposite being stated.

Blurring out of a signal form field after focusing it correctly mark the field with the `ion-touched` class.

But calling `markAsTouched()` on a signal form doesn't work.

### Describe the Use Case

I have a signal form like this:

```html


Submit

```

```ts
export class AppComponent {
protected readonly form = form(signal({ field: '' }));
protected onSubmit(): void {
this.form().markAsTouched();
}
}
```

When clicking on the submit button (without focusing/blurring the input) the `ng-touched` class is correctly applied but I still have `ion-untouched` instead of `ion-touched`.

### Describe Preferred Solution

The `ion-touched` class should be automatically added to the ion-input, like it does when using `[formControl]` instead of `[formField]`.

### Describe Alternatives

I'm currently fixing the problem by applying the class myself:

```html

```

### Related Code

_No response_

### Additional Information

My app config `providers` includes `provideSignalFormsConfig({ classes: NG_STATUS_CLASSES })` so that the `ng-invalid`, `ng-touched`, and other angular classes are automatically added by Angular, otherwise, `[formField]` no longer have `ng-*` classes applied by default like they used to have with `[formControl]`

贡献指南

打开贡献指南

调研方向

Start with the Angular signal forms integration points used by formRoot, formField, and ion-input, then reproduce the submit example where form().markAsTouched() is called without focusing the field. Done means markAsTouched() causes ion-input to receive ion-touched rather than ion-untouched, while the existing formControl behavior remains intact.

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

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
功能
难度
3/5
预计耗时
1-2 天
活跃度
活跃
描述清晰度
基本清楚
新手友好度
68/100

把新 issue 发到你的邮箱

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