Conversation
|
|
||
| /** | ||
| * @title Select in a form | ||
| * @title Select in a form (template-driven forms) |
There was a problem hiding this comment.
@crisbeto When updating this example, I realized that merely adding one example would make things tricky, without a more comprehensive overhaul.
My reasoning:
- Adding the respective signal form example made me specify this existing example as
(template-driven forms, as is consistent with my previous PRs. - 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.
- I would then just replace the embedded example in the overview with my new signal form example
- 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.
- 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
- Replace all form related examples and with signal form examples, rather than adding more examples on top of the existing ones
- 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.
There was a problem hiding this comment.
Unless there's some more awkwardness left in the support for signal forms, we should probably just promote those in all the examples.
There was a problem hiding this comment.
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
- Harness tests msmallest@6a821af
- Select tests msmallest@0b4c0d0
- The
MultiSelecttest class on line 4802
- The
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.
ca17797 to
9422e01
Compare
Description
mat-selectwith signal forms(template-driven forms)from that example?