Password | Neural Native

Importación

component.ts

import { NeuPasswordComponent } from '@neural-ui/native/password';

Ejemplos

Importa ExampleComponent en su padre y coloca <app-example /> dentro del neu-theme raíz de tu aplicación. El preview aporta el marco y las zonas seguras; utiliza la estructura raíz de Instalación en tu app.

Protege tu espacio

Compara la contraseña con su confirmación y muéstrala sin modificar su valor. La comprobación de longitud es ilustrativa; el servidor establece la política real.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuPasswordComponent } from '@neural-ui/native/password';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuPasswordComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Protege tu espacio</text><text class="product-caption">Una cuenta privada comienza con una contraseña sólida</text></view>
    <view class="product-surface"><neu-password requiredLabel="Obligatorio" label="Contraseña" hint="Utiliza una contraseña única para esta cuenta" [(value)]="password" (valueChange)="checked.set(false)" [(revealed)]="revealed" />
    <neu-password requiredLabel="Obligatorio" label="Confirmar contraseña" [(value)]="confirmation" (valueChange)="checked.set(false)" />
    <text class="product-caption">Usa al menos 12 caracteres en esta demostración.</text>
    <view class="product-actions"><neu-button label="Comprobar contraseñas" size="sm" [disabled]="password().length < 12 || password() !== confirmation()" (pressed)="checked.set(true)" /></view>
    @if (checked() && password().length >= 12 && password() === confirmation()) { <text class="product-caption" accessibilityLiveRegion="polite">Las contraseñas coinciden. No se ha enviado ni guardado nada.</text> }</view></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }

  `,
})
export class ExampleComponent {
  readonly password = signal('');
  readonly confirmation = signal('');
  readonly revealed = signal(false);
  readonly checked = signal(false);
}

Validación

Introduce al menos ocho caracteres para eliminar el error de longitud del ejemplo.

Ver y copiar el ejemplo completo

validation.component.ts

import { Component, signal } from '@angular/core';
import { NeuPasswordComponent } from '@neural-ui/native/password';
import { View, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuPasswordComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-password requiredLabel="Obligatorio" label="Contraseña de la nueva cuenta" [(value)]="newPassword" [invalid]="newPassword().length > 0 && newPassword().length < 8" [touched]="true" error="Usa al menos ocho caracteres." hint="El ejemplo comprueba solo la longitud." />
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly password = signal('');
  readonly newPassword = signal('short');
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Password · android · native capture — **Android**Captura nativa

Password · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
showLabel	string	'Show password'	Input	Nombre accesible del botón de ojo en este estado. El botón muestra un icono, no este texto; personaliza el nombre para el idioma de tu aplicación.
hideLabel	string	'Hide password'	Input	Nombre accesible del botón de ojo en este estado. El botón muestra un icono, no este texto; personaliza el nombre para el idioma de tu aplicación.
label	string	Obligatorio	Input	Nombre legible del control, acción o grupo.
disabled	boolean	false	Input	Desactiva la interacción del usuario. La aplicación puede seguir proporcionando valores.
readonly	boolean	false	Input	Impide editar o seleccionar desde el control y conserva el valor actual.
invalid	boolean	false	Input	Marca el control como inválido. El formulario o la aplicación aporta la regla de validación.
touched	boolean	false	Input	Estado de interacción con el campo, aportado manualmente o mediante Signal Forms.
hint	string	''	Input	Ayuda del campo que aparece cuando no se muestra un mensaje de error.
required	boolean	false	Input	Presentación de campo obligatorio. Define la regla de validación real en el formulario de tu aplicación.
requiredLabel	string	'Required'	Input	Requisito traducido que se anuncia con la ayuda cuando required es true. Required por defecto; no valida el valor.
error	string	''	Input	Mensaje de error aportado por la aplicación; combínalo con el estado invalid del control.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
revealed	boolean	false	Model · bidireccional	Indica si la contraseña se muestra en lugar de ocultarse. Enlaza una signal escribible mediante [(revealed)].
value	string	''	Model · bidireccional	Valor editado o ID(s) seleccionado(s), según el tipo declarado. Enlaza una signal escribible mediante [(value)].

Outputs

Nombre	Payload	Cuándo se emite
revealedChange	boolean	Emite el valor actualizado de revealed. [(revealed)] enlaza este output junto con su input model.
valueChange	string	Emite el valor actualizado de value. [(value)] enlaza este output junto con su input model.
touch	void	Comunica la interacción del usuario al formulario o aplicación que lo contiene.

Estado de los models

Enlaza la signal con [(nombreModel)] sin llamarla. Utiliza nombreModel() para leer su valor.

model-fields.ts

import { signal } from '@angular/core';

// Fields inside your component class
readonly revealed = signal<boolean>(false);
readonly value = signal<string>('');