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]

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