feat(FormField): signal forms support

[marklagendijk]

Feature Description

The first (experimental) version of Signal Forms will land in Angular 21.
This is awesome news, because with Signal Forms, forms finally become fully reactive, functional and composable.
I would like to be able to use Signal Forms with Angular Material.

For an outsider, it is impossible to see whether Angular Material support for Signal Forms:

1. Will just work out-of-the-box
2. Will require some small changes in Angular Material
3. Requires a huge amount of work in Angular Material

Use Case

As a developer, I love the improvements that Signal Forms will bring to our code base.
I am really looking forward to using them in tandem with Angular Material.

[ruiaraujo012]

I just found a limitation in material MatStep, only AbstractControl can be used in stepControl. So we cannot use signal forms yet here.

[michael-small]

I am also curious for more formal talk on this. That said, there is a list item on the signal forms board about Material support. That is a very living board updated over time (last updated on Oct 24), so I won't quote it directly, but it answers various questions for me: Signal Forms (view)

[vvolodin]

Is there any official status or timeline for this? I naively thought that version 21 of Angular Material will have support for new features in Angular 21.

[stephenlautier]

Currently, can you use signal forms at all with material? e.g. matInput if so does anyone has an example?

[marklagendijk]

Well, I would say 'experimental' means that you can experiment, and that some things will work, while other things might not.

We have been playing with it, and so far everything just works:

<mat-form-field subscriptSizing="dynamic">
  <mat-label>Title</mat-label>
  <input [field]="form.title" matInput type="text" />
</mat-form-field>

<mat-form-field subscriptSizing="dynamic">
  <mat-label>Select Group Members:</mat-label>
  <mat-select [field]="form.groupMemberships" multiple>
    @for (user of data.users; track user) {
      <mat-option [value]="user.id">
        {{ user.name }}
      </mat-option>
    }
  </mat-select>
</mat-form-field>

[argalasjr]

what about custom components (eg custom wrapped file input) to support field directive within mat form fields ?

It requires component to implement both MatFormFieldControl and FormValueControl which is not possible at the moment

[dyingangel666]

@argalasjr yeah, i can confirm that. i just stumbled across the same problem. value, disabled and required props are used in both interfaces and conflicting with different types :)

[jeanfwl]

I just found a limitation in material MatStep, only AbstractControl can be used in stepControl. So we cannot use signal forms yet here.

I was experiencing the same issue. I solved it by binding the completed property to the field validation state:

[completed]="form.myField().valid()"