test: migrate form control usages to modern syntax (#28897)

Issue number: Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Several tests were still using the legacy form syntax.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Migrated tests in `core`, `angular`, and `vue` to use the modern form
syntax (`react` did not have form controls).

I opted not to migrate `item/test/highlight` and `item/test/counter`
because those tests are going to be removed in the future once the
deprecate item APIs are removed.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>

packages/angular/test/base/src/app/lazy/form/form.component.html

@@ -49,14 +49,12 @@
       </ion-item>
 
       <ion-item>
-        <ion-label>Min</ion-label>
-        <ion-input formControlName="inputMin" type="number"></ion-input>
+        <ion-input label="Min" formControlName="inputMin" type="number"></ion-input>
         <pre>errors: {{ profileForm.controls['inputMin'].errors | json }}</pre>
       </ion-item>
 
       <ion-item>
-        <ion-label>Max</ion-label>
-        <ion-input formControlName="inputMax" type="number"></ion-input>
+        <ion-input label="Max" formControlName="inputMax" type="number"></ion-input>
         <pre>errors: {{ profileForm.controls['inputMax'].errors | json }}</pre>
       </ion-item>
     </ion-list>

packages/angular/test/base/src/app/lazy/modal-example/modal-example.component.html

@@ -25,8 +25,8 @@
 
   <form [formGroup]="form">
     <ion-item id="inputWithFloatingLabel">
-      <ion-label color="primary" position="floating">Floating Label</ion-label>
-      <ion-select multiple="false" formControlName="select">
+      <ion-select label-placement="floating" multiple="false" formControlName="select">
+        <ion-label slot="label" color="Primary">Floating Label</ion-label>
         <ion-select-option [value]="0">Option 0</ion-select-option>
         <ion-select-option [value]="1">Option 1</ion-select-option>
       </ion-select>

packages/angular/test/base/src/app/lazy/textarea/textarea.component.html

@@ -2,8 +2,7 @@
   <form [formGroup]="form">
     <ion-list>
       <ion-item>
-        <ion-label>Textarea</ion-label>
-        <ion-textarea formControlName="textarea"></ion-textarea>
+        <ion-textarea label="Textarea" formControlName="textarea"></ion-textarea>
       </ion-item>
     </ion-list>
   </form>

packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html

@@ -6,6 +6,6 @@
   </p>
 
   <app-value-accessor-test [formGroup]="form">
-    <ion-checkbox formControlName="checkbox"></ion-checkbox>
+    <ion-checkbox formControlName="checkbox">Checkbox</ion-checkbox>
   </app-value-accessor-test>
 </div>

packages/angular/test/base/src/app/standalone/value-accessors/range/range.component.html

@@ -4,6 +4,6 @@
     This test checks the form integrations with ion-range to make sure values are correctly assigned to the form group.
   </p>
   <app-value-accessor-test [formGroup]="form">
-    <ion-range formControlName="range"></ion-range>
+    <ion-range label="Range" formControlName="range"></ion-range>
   </app-value-accessor-test>
 </div>

packages/angular/test/base/src/app/standalone/value-accessors/toggle/toggle.component.html

@@ -5,6 +5,6 @@
   </p>
 
   <app-value-accessor-test [formGroup]="form">
-    <ion-toggle formControlName="toggle"></ion-toggle>
+    <ion-toggle formControlName="toggle">Toggle</ion-toggle>
   </app-value-accessor-test>
 </div>