feat(angular): add support signal forms

[luisbytes]

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

Angular now provides Signal-based Forms as a modern, reactive alternative to traditional ReactiveFormsModule. Many projects are starting to adopt the new API.

Currently, @ionic/angular components are optimized around the classic reactive forms model, and some form-related components or directives don’t integrate seamlessly with Signal Forms.

Describe the Use Case

Apps using the new Angular Signal Forms cannot fully integrate with Ionic form components without fallbacks or extra wrappers.

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

It would be very useful for Ionic components to work seamlessly with the new Signal Forms API—being able to mark inputs as touched/invalid and display error messages just like with Reactive Forms. This would provide a consistent developer experience when building forms in Angular.

More details can be found here:
https://angular.dev/guide/forms/signals/custom-controls

[rdlabo]

I migrated all forms in my Ionic Angular app to Signal Forms today, and everything is working fine so far — including dirty and touched.

@luisbytes Could you clarify the specific issue you’re running into? I’m happy to do more testing on my end if that helps.

[pankajparkar]

I couldn't locate any example where signal forms being used along with ionic controls using [formField] directive.

[pankajparkar]

It works with the [formField] directive!

I successfully migrated all forms in my Ionic Angular app to Signal Forms, and everything is working seamlessly with ion-input and other Ionic components using the [formField] attribute.

Setup:

import { form, required, email, FormField } from '@angular/forms/signals';
import { IonInput } from '@ionic/angular/standalone';

@Component({
  imports: [IonInput, FormField],  // Import the FormField directive
  // ...
})
export class MyFormComponent {
  readonly formModel = signal({ name: '', email: '' });
  
  readonly myForm = form(this.formModel, (s) => {
    required(s.name);
    required(s.email);
    email(s.email);
  });
}

Template:

<ion-input [formField]="myForm.name" placeholder="Enter name"></ion-input>
<ion-input [formField]="myForm.email" type="email" placeholder="Enter email"></ion-input>

Why it works:

The [formField] directive from @angular/forms/signals implements the standard ControlValueAccessor pattern under the hood. Since Ionic's form components (ion-input, ion-checkbox, etc.) already implement ControlValueAccessor, they work out of the box with Signal Forms.

The key is importing FormField from @angular/forms/signals and adding it to your component's imports array. Then you can bind directly using [formField]="formSignal.fieldName".

Features that work:

✅ Two-way binding (model updates automatically)
✅ dirty / touched state tracking
✅ Validation errors accessible via myForm.fieldName().errors()
✅ markAsTouched() for programmatic validation display
Hope this helps others looking for a working example!

[ShaneK]

@luisbytes was this able to help with your problem? Are you still having issues with signals in Angular forms?

[ionitron-bot]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!