feat: refactor input component to use model binding for value management

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html

@@ -51,9 +51,8 @@
             id="search-input"
             type="search"
             placeholder="Buscar producto"
-            [value]="textValue"
+            [(value)]="textValue"
             [maxlength]="24"
-            (valueChange)="textValue = $event"
           />
         </div>
 
@@ -63,8 +62,7 @@
             id="number-input"
             type="number"
             placeholder="0"
-            [value]="numberValue"
-            (valueChange)="numberValue = $event"
+            [(value)]="numberValue"
           />
         </div>
 
@@ -74,8 +72,7 @@
             id="email-input"
             type="email"
             placeholder="mail@empresa.com"
-            [value]="email"
-            (valueChange)="email = $event"
+            [(value)]="email"
           />
         </div>
 
@@ -85,8 +82,7 @@
             id="user-input"
             type="user"
             placeholder="Nombre de usuario"
-            [value]="user"
-            (valueChange)="user = $event"
+            [(value)]="user"
           />
         </div>
 
@@ -96,29 +92,18 @@
             id="password-input"
             type="password-toggle"
             placeholder="********"
-            [value]="password"
-            (valueChange)="password = $event"
+            [(value)]="password"
           />
         </div>
 
         <div class="input-field">
           <label for="date-input">Fecha</label>
-          <app-input
-            id="date-input"
-            type="date"
-            [value]="date"
-            (valueChange)="date = $event"
-          />
+          <app-input id="date-input" type="date" [(value)]="date" />
         </div>
 
         <div class="input-field">
           <label for="period-input">Periodo</label>
-          <app-input
-            id="period-input"
-            type="period"
-            [value]="period"
-            (valueChange)="period = $event"
-          />
+          <app-input id="period-input" type="period" [(value)]="period" />
         </div>
 
         <div class="input-field">
@@ -127,8 +112,7 @@
             id="amount-input"
             type="currency"
             placeholder="0"
-            [value]="amount"
-            (valueChange)="amount = $event"
+            [(value)]="amount"
           />
         </div>
 
@@ -138,8 +122,7 @@
             id="percent-input"
             type="percent"
             placeholder="0"
-            [value]="percent"
-            (valueChange)="percent = $event"
+            [(value)]="percent"
           />
         </div>
 
@@ -158,9 +141,8 @@
           <app-input
             id="editable-input"
             type="editable"
-            [value]="editableValue"
+            [(value)]="editableValue"
             [disabled]="editableDisabled"
-            (valueChange)="editableValue = $event"
             (disabledChange)="editableDisabled = $event"
           />
         </div>
@@ -171,9 +153,8 @@
             id="invalid-input"
             type="email"
             placeholder="mail@empresa.com"
-            [value]="invalidEmail"
+            [(value)]="invalidEmail"
             [invalid]="true"
-            (valueChange)="invalidEmail = $event"
           />
         </div>
 

src/app/shared/components/input/input.component.ts

@@ -5,6 +5,7 @@ import {
   computed,
   effect,
   input,
+  model,
   output,
   signal,
   untracked,
@@ -71,7 +72,7 @@ export class InputComponent {
   readonly invalid = input(false);
   readonly id = input(this.defaultId);
   readonly placeholder = input('');
-  readonly value = input<string | number>('');
+  readonly value = model<string | number>('');
   readonly maxlength = input<number | null>(null);
   readonly accept = input('');
   readonly fileName = input('');
@@ -83,7 +84,6 @@ export class InputComponent {
   });
 
   readonly disabledChange = output<boolean>();
-  readonly valueChange = output<string>();
   readonly fileChange = output<File | null>();
   readonly visibleChange = output<boolean>();
 
@@ -167,7 +167,7 @@ export class InputComponent {
   }
 
   protected onValueChange(event: Event): void {
-    this.valueChange.emit((event.target as HTMLInputElement).value);
+    this.value.set((event.target as HTMLInputElement).value);
   }
 
   protected onFileChange(event: Event): void {