tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ncoronel
2026-06-26 10:22:25 -03:00
parent 0d46172325
commit bccb1b565f
2 changed files with 14 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

6
src/app/shared/components/input/input.component.ts
View File

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