Formulários orientados por modelo no Angular

Name: Formulários orientados por modelo no Angular
Author: Michaela Ochnich

Este capítulo centrar-se-á na construção de formas orientadas para o modelo. Aprenderás a criar o modelo de formulário e ligá-lo a um modelo de dados. Vais aprender sobre os estados de controlo de Angular, e como usá-los para lidar com a validação de formulários e exibir mensagens de feedback de erro para o utilizador.

Preview the first lesson free — get full access to all 6 lessons.

Solicitar uma demonstração Entrar

Curso: sob demanda

Esta lição irá guiá-lo através da configuração o modelo para o seu formulário baseado em modelo. Para esta demonstração, Vou criar um formulário de registro de usuário simples. Primeiro, vou gerar um componente para conter o formulário e, em seguida, adicione esse componente à raiz, e então neste modelo de raiz, Vou deletar todo este código inicial e adicionar esse componente de formulário. Agora, ao criar formulários baseados em modelos, você precisa importar o FormsModule. Então, vou fazer isso agora no módulo de aplicativo raiz. Este FormsModule inclui todos as diretivas angulares de que você precisa para construir, ligar e validar esse formulário baseado em modelo. NgModel e NgForm são dois das diretivas que você usará que fazem parte deste módulo. NgModel é a diretiva usada para vinculação bidirecional e o NgForm tratará do envio do formulário bem como fornecer informações de validação. Agora, com isso importado, Posso começar a construir o modelo do formulário. Então, abrindo esse modelo de componente de formulário. Este formulário incluirá campos para um primeiro e sobrenome e endereço de e-mail, uma senha, um número de telefone e a opção de se inscrever em uma lista de e-mails. Os campos de nome, e-mail e senha serão obrigatórios, mas então os outros campos serão deixados opcionais. Então, aqui, primeiro criarei um formulário, e aqui, adicionarei o campo para o primeiro nome e aqui para os campos de entrada, você vai querer incluir os atributos de ID e nome. O ID é usado para combinar a entrada com o rótulo e o Angular precisará do atributo name para as diretivas NgModel e NgForm posteriormente. Eu também vou para estilizar rapidamente esta classe de grupo com alguma margem para que esses campos não fiquem todos uns em cima dos outros e, em seguida, de volta ao modelo de componente, Vou repetir este código para o resto dos campos do formulário, e para este campo de e-mail aqui, Certifiquei-me de que o tipo de entrada também é e-mail para que a validação necessária mais tarde funcione corretamente para esse campo, e aqui para o campo de e-mail, você quer ter certeza de que o tipo de entrada está definido para refletir que é um endereço de e-mail para que a validação funcione corretamente. Também farei o mesmo para os próximos dois campos, a senha e número de telefone, e este formulário também precisará de um botão de envio e depois vendo isso no navegador, todos esses campos são configurados e exibidos aqui. Então isso é tudo para esta lição sobre como configurar o modelo e a próxima lição mostraremos como para vincular este modelo usando NgModel.

Intermediário Fornecedor : Michaela Ochnich 6 lições · 30m em Árabe, Alemão, Inglês, Espanhol, Francês, Português, Chinese

Descrição do curso

Este capítulo se concentrará na construção de formulários orientados a modelos. Aprenderás como criar o modelo de formulário e vinculá-lo a um modelo de dados. Aprenderás sobre os estados de controlo do Angular e como usá-los para lidares com a validação de formulários e exibires mensagens de feedback de erro para o usuário. Este capítulo também cobrirá o envio de formulários.

O Que Você Vai Aprender

Criar um formulário orientado por modelo para coletar informações do usuário
Construir o modelo de formulário e vinculá-lo a um modelo de dados
Usar estados de controle do Angular para rastrear o status do formulário e entrada
Implementar validação de formulário e exibir mensagens de feedback de erro para o usuário
Lidar com envio de formulário

Principais Conclusões

O capítulo se concentra em construir formulários orientados por modelo em Angular, incluindo criar o modelo de formulário e vinculá-lo a um modelo de dados.
Os estados de controle do Angular podem ser usados para lidar com validação de formulário e exibir mensagens de feedback de erro para o usuário.
O capítulo abrange envio de formulário como parte do trabalho com formulários orientados por modelo.
A validação de formulário é abordada em duas lições dedicadas (Validação de Formulário Parte 1 e Parte 2).

Perguntas Frequentes

O que este capítulo abrange?

Este capítulo se concentra em construir formulários orientados por modelo em Angular, incluindo criar o modelo de formulário, vinculá-lo a um modelo de dados, usar estados de controle, lidar com validação de formulário com mensagens de feedback de erro e envio de formulário.

O que vou aprender a fazer com formulários?

Você aprenderá como criar um formulário para obter informações do usuário e como gerenciar validação e envio de formulário.

Como a validação de formulário Angular é ensinada neste capítulo?

A validação de formulário é coberta através dos estados de controle do Angular, que são usados para lidar com validação e exibir mensagens de feedback de erro para o usuário, e é dividida em duas lições: Validação de Formulário Parte 1 e Validação de Formulário Parte 2.

Quais lições estão incluídas neste capítulo?

As lições são Construindo o Modelo, Vinculando o Formulário, Estados de Controle, Validação de Formulário Parte 1, Validação de Formulário Parte 2 e Envio de Formulário.

Quais habilidades este capítulo está relacionado?

Está relacionado a Angular (framework web), Angular Components, Angular Reactive Forms, Angular UI, Ng Controller e Templates.