Skip to content

docs: add signal form example for mat-select - #33886

Draft
msmallest wants to merge 3 commits into
angular:mainfrom
msmallest:docs-select-signal-form
Draft

msmallest wants to merge 3 commits into
angular:mainfrom
msmallest:docs-select-signal-form

Conversation

@msmallest

@msmallest msmallest commented Sep 29, 2026 •

Copy link
Copy Markdown
Contributor

Description

  • Adds example for mat-select with signal forms
  • Leaving as a draft as some outstanding questions will inform changes to be made
    • Should non-signal-form examples be replaced, in cases like this where a lot more examples would need to be added?
    • If examples are not replaced, should I just omit (template-driven forms) from that example?

@angular-robot angular-robot Bot added the area: docs Related to the documentation label Sep 29, 2026

/**
* @title Select in a form
* @title Select in a form (template-driven forms)

@msmallest msmallest Sep 29, 2026 •

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@crisbeto When updating this example, I realized that merely adding one example would make things tricky, without a more comprehensive overhaul.

My reasoning:

  1. Adding the respective signal form example made me specify this existing example as (template-driven forms, as is consistent with my previous PRs.
  2. Because this example is renamed, it is highlighted in the "Overview" page. In retrospect, this has already happened to other component examples embedded in overviews, but for point 4 I think this case with selects is different.
  3. I would then just replace the embedded example in the overview with my new signal form example
  4. Problem A: Now that there is one signal form example in the overview, but all the other embedded examples in the overview are fairly iterative on top of this basic example that is converted, I think there would be an inconsistency.
  5. Problem B: All those examples embedded in the "Overview" could all be replaced by additional signal form examples, but now there would be very many examples in the "Examples" tab.

How should I go about this? In my opinion, I would just do the following two things

  1. Replace all form related examples and with signal form examples, rather than adding more examples on top of the existing ones
  2. Make a singular "Select with forms" which has reactive/template/signal forms just like in a previous PR, for the button toggles: https://material.angular.dev/components/button-toggle/examples#button-toggle-forms

My reasoning being that signal forms are now the encouraged default for forms, the docs recently updated the page for custom Material controls to be signal forms first, and that there are plenty of older docs versions to look for older iterations of template/reactive form examples.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unless there's some more awkwardness left in the support for signal forms, we should probably just promote those in all the examples.

@msmallest msmallest Sep 30, 2026 •

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TL;DR despite select multiple definitely being one of the remaining akwardnesses of signal forms left, I think mat-select multiple handles it perfectly. Thoughts? If this all sounds right, I will proceed with the rest of the examples.

Unless there's some more awkwardness left in the support for signal forms, we should probably just promote those in all the examples.

Now that you mention it, select multiple is the one edge case with signal forms that has problems right now: angular/angular#68511 There is an outstanding PR pending more decisions in this issue.

However, it seems that it works great in Material. Example project I made for reference: https://stackblitz.com/edit/mhqdr1d1?file=src%2Fexample%2Fselect-multiple-example.ts. Boolean, number, string, string array (added this based on my follow notes on unit tests for select), and object arrays in a mat-select multiple each. I have not looked at the internals of how mat-select multiple is implemented, but in practice mat-select seems like it lines up with the guidance from the Angular Skills which was just amended today: angular/angular@306b99c.

"<select multiple> is unsupported. Use one boolean field + checkbox per option"

      <!-- Multiple choices: one boolean field per option, bound to a checkbox -->
      <label>
        <input type="checkbox" [formField]="bookingForm.package.extras.wifi" />
        WiFi
      </label>
      <label>
        <input type="checkbox" [formField]="bookingForm.package.extras.gym" />
        Gym
      </label>

I threw together a temp branch with a signal forms version of the mat-select harness test and the mat-select itself test, and modified the multiple variants

I had to modify some assertions due to value equality differences, null vs [] defaults for values, and a few other things that you may want to vet if I was in the right to do so, but with all that considered, those passed once adjusted to the new constraints.

@msmallest
msmallest force-pushed the docs-select-signal-form branch from ca17797 to 9422e01 Compare September 30, 2026 00:50

This branch has not been deployed

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

Labels

area: docs Related to the documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants