Sinais angulares explicados: como a reatividade baseada em pull muda a forma como modelamos o estado

Exemplo de formulário de sinais angulares

Um exemplo mínimo ilustra a forma desta abordagem. O modelo permanece uma interface simples e o sinal mantém os valores atuais do formulário.

interface RegistrationData {
  email: string;
  password: string;
  confirmPassword: string;
  acceptedTerms: boolean;
}

O formulário é então criado passando este sinal de modelo para form()juntamente com um esquema que declara regras de validação.

const registrationModel = signal({
  email: '',
  password: '',
  confirmPassword: '',
  acceptedTerms: false,
});

const registrationForm = form(registrationModel, (schema) => {
  required(schema.email, { message: 'Email is required' });
  email(schema.email, { message: 'Enter a valid email address' });

  required(schema.password, { message: 'Password is required' });
  required(schema.confirmPassword, { message: 'Please confirm your password' });

  required(schema.acceptedTerms, {
    message: 'You must accept the terms to continue',
  });
});

O que importa aqui não é a sintaxe, mas a estrutura. O sinal do modelo define qual é a forma. O esquema define quais restrições se aplicam. Angular assume a responsabilidade de derivar o estado do campo e expô-lo por meio de sinais que a IU pode consumir diretamente.