ionic-team / ionic-team/ionic-framework
feat(angular): support markAsTouched() for angular signal forms
- 主要言語
- TypeScript
- スター
- 52.7k
- フォーク
- 13.3k
- 平均マージ
- 1日 15時間
- マージ済み PR(30日)
- 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