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 {
  electronic mail: string;
  password: string;
  confirmPassword: string;
  acceptedTerms: boolean;
}

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

const registrationModel = sign({
  electronic mail: '',
  password: '',
  confirmPassword: '',
  acceptedTerms: false,
});

const registrationForm = type(registrationModel, (schema) => {
  required(schema.electronic mail, { message: 'E mail is required' });
  electronic mail(schema.electronic mail, { message: 'Enter a legitimate electronic mail deal with' });

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

  required(schema.acceptedTerms, {
    message: 'You could settle for the phrases to proceed',
  });
});

O que importa aqui não é a sintaxe, mas a estrutura. O sinal do modelo outline qual é a forma. O esquema outline 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.