ionic-team / ionic-team/ionic-framework

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

Đang mở
#31,405 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
triage
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

### 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]`

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Tính năng
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Sôi nổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
68/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.