Skip to content

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

Description

@Julien-Marcou

Prerequisites

Describe the Feature Request

I already took a look at #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:

<form [formRoot]="form" (submit)="onSubmit()">
  <ion-input [formField]="form.field" />
  <ion-button type="submit">Submit</ion-button>
</form>
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:

<ion-input [formField]="form.field" [class.ion-touched]="form.field().touched()" />

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]

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions