diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html index af58a90..06d1463 100644 --- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html +++ b/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" /> @@ -63,8 +62,7 @@ id="number-input" type="number" placeholder="0" - [value]="numberValue" - (valueChange)="numberValue = $event" + [(value)]="numberValue" /> @@ -74,8 +72,7 @@ id="email-input" type="email" placeholder="mail@empresa.com" - [value]="email" - (valueChange)="email = $event" + [(value)]="email" /> @@ -85,8 +82,7 @@ id="user-input" type="user" placeholder="Nombre de usuario" - [value]="user" - (valueChange)="user = $event" + [(value)]="user" /> @@ -96,29 +92,18 @@ id="password-input" type="password-toggle" placeholder="********" - [value]="password" - (valueChange)="password = $event" + [(value)]="password" />
- +
- +
@@ -127,8 +112,7 @@ id="amount-input" type="currency" placeholder="0" - [value]="amount" - (valueChange)="amount = $event" + [(value)]="amount" />
@@ -138,8 +122,7 @@ id="percent-input" type="percent" placeholder="0" - [value]="percent" - (valueChange)="percent = $event" + [(value)]="percent" /> @@ -158,9 +141,8 @@ @@ -171,9 +153,8 @@ id="invalid-input" type="email" placeholder="mail@empresa.com" - [value]="invalidEmail" + [(value)]="invalidEmail" [invalid]="true" - (valueChange)="invalidEmail = $event" /> diff --git a/src/app/shared/components/input/input.component.ts b/src/app/shared/components/input/input.component.ts index 92d13ab..25437dc 100644 --- a/src/app/shared/components/input/input.component.ts +++ b/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(''); + readonly value = model(''); readonly maxlength = input(null); readonly accept = input(''); readonly fileName = input(''); @@ -83,7 +84,6 @@ export class InputComponent { }); readonly disabledChange = output(); - readonly valueChange = output(); readonly fileChange = output(); readonly visibleChange = output(); @@ -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 {