Signal Forms

Elige enlaces simples o un árbol de formulario

Para un ajuste pequeño e independiente, basta una signal escribible con [(value)] o [(checked)]. Utiliza Signal Forms cuando varios campos necesiten validación y estado compartidos. La función form de Angular crea un árbol de campos a partir de la signal del modelo; FormField conecta un control Native con uno de esos campos.

Signal Forms pertenece a @angular/forms; no es un inicializador adicional de Neural Native. Si tu aplicación no incluye ese paquete, instala la misma versión que @angular/core. Para la base Angular probada, el comando es:

npm install @angular/forms@22.2.2

Un campo validado completo

Crea src/app/email-form.component.ts y coloca app-email-form dentro del tema raíz. Importa FormField en el array imports de este componente. Enlaza [formField] con profileForm.email; no añadas además [(value)] a una segunda signal en este campo.

import { Component, computed, signal } from '@angular/core';
import { FormField, email, form, required } from '@angular/forms/signals';
import { Text, View } from '@ng-native/components';
import { NeuInputComponent } from '@neural-ui/native/input';
import { NeuButtonComponent } from '@neural-ui/native/button';

@Component({
  selector: 'app-email-form',
  imports: [FormField, Text, View, NeuInputComponent, NeuButtonComponent],
  template: `
    <view class="content">
      <neu-input label="Email address" keyboardType="email-address"
        [formField]="profileForm.email" [error]="emailError()" hint="Used for account updates" />
      <neu-button label="Save email" (pressed)="save()" />
      <text class="feedback">{{ feedback() }}</text>
    </view>
  `,
  styles: `
    .content { padding: 24px; gap: 16px; }
    .feedback { color: var(--neu-text); }
  `,
})
export class EmailFormComponent {
  readonly profile = signal({ email: '' });
  readonly profileForm = form(this.profile, (path) => {
    required(path.email, { message: 'Enter your email address.' });
    email(path.email, { message: 'Enter a valid email address.' });
  });
  readonly feedback = signal('');
  readonly emailError = computed(() => {
    const field = this.profileForm.email();
    return field.touched() ? (field.errors()[0]?.message ?? '') : '';
  });

  save(): void {
    this.profileForm.email().markAsTouched();
    if (this.profileForm().invalid()) {
      this.feedback.set('Check your email address.');
      return;
    }
    this.feedback.set('Email ready: ' + this.profile().email);
    // Persist profile() through your application service.
  }
}

Qué se sincroniza y qué aportas tú

FormField conecta el valor del modelo y el estado de campo admitido, como invalid, touched, disabled y readonly, mediante el contrato del control. Input y Textarea utilizan value; Switch y Checkbox utilizan checked. El input error de Neural Native es el mensaje que decides mostrar: no traduce automáticamente los errores de los validadores.

El ejemplo muestra el primer mensaje del validador después de tocar el campo. Save marca el campo como touched antes de comprobar invalid en la raíz, de modo que un campo vacío sin tocar recibe un mensaje útil. Para validar en el servidor, conserva un estado de petición independiente y muestra el mensaje del servidor sin perder las ediciones del usuario.

El teclado de correo facilita la entrada, pero no valida la dirección. Define las reglas required y email en el modelo del formulario y conserva la validación del backend en tu servicio.