feat(angular): support markAsTouched() for angular signal forms #31405
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already include this feature request, without success.
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
thetaPC commentedon Oct 22, 2026
Thanks for the report, and sorry for the delay.
Verified on 9.0.9.
@ionic/angularcopies Angular'sng-*classes onto the matchingion-*classes when the value changes, when the input blurs, and when a reactiveFormControlemits a status change or runs one of itsmarkAs*methods.[formField]hands Ionic a signal forms control that has no status stream and nomarkAs*methods, somarkAsTouched()on a signal form addsng-touchedbut never reachesion-touched, anderrorTextstays hidden. Validity changes that come from another field, such as a cross-field validator, don't reachion-invalidfor the same reason.The comment on #30805 saying
markAsTouched()works refers to Angular's owntouched()state, which does update, and to errors rendered in your own template. It doesn't cover theion-touchedclass thaterrorTextdepends on.Your
[class.ion-touched]workaround is correct, verified on 9.0.9 with Angular 22.2.3. KeepprovideSignalFormsConfig({ classes: NG_STATUS_CLASSES })in place alongside it: Ionic builds theion-*classes from theng-*ones, so without that config noion-*classes are applied and the bound class is cleared as soon as the user types.We're tracking this as a feature request for
@ionic/angular.