Curso Angular

Formulários (Reativos data-driven)

---

Servidor de desenvolvimento

Executando ng serve para um servidor de desenvolvimento.

Navegue para http://localhost:4200/. O aplicativo será recarregado automaticamente se você alterar qualquer um dos arquivos de origem.

Para rodar o projeto

Foi utilizado o Angular CLI para estruturar e build.

Precisa fazer a instalação das bibliotecas bootstrap, materialize, lodash, jquery.

Conteúdo Abordado 📃

• Formulários reativos (data driven) Introdução
• Formulários reativos: Configuração (Módulo e Componente)
• Formulários reativos: Criando um form com código Angular
• Formulários reativos: Sincronizando HTML com FormGroup
• Formulários reativos: Fazendo submit
• Resetando o form
• Formulários reativos: Aplicando validação nos campos
• Formulários reativos: Acesso ao FormControl no HTML e CSS de validação dos campos
• Formulários reativos: Endereço (migrando de template driven para form reativo)
• Formulários reativos: Form groups (agrupando dados)
• Formulários reativos: Autopopulando endereço com CEP (setValue e patchValue)
• Formulários reativos: Verificar validação dos campos com botão submit
• Formulários: Criando um serviço de Estados Brasileiros
• Formulários: Serviço de consulta CEP + provideIn
• Formulários reativos: Combobox simples (select)
• Formulários reativos: Combobox com Objeto (ngValue e compareWith)
• Formulários reativos: Combobox Múltiplo (Select Multiple)
• Formulários reativos: Radio Button (Botão do tipo Rádio)
• Formulários reativos: Checkbox Toggle
• Formulários reativos: FormArray: Checkboxes Dinâmicos
• Formulários reativos: Validação Customizada (FormArray Checkboxes)
• Formulários reativos: Validação Customizada (CEP)
• Formulários reativos: Validação entre dois campos (confirmar email)
• Formulários reativos: Validação Assíncrona
• Formulários reativos: Serviço de Mensagens de Erros
• Formulários reativos: Reagindo à mudanças reativamente
• Formulários reativos: Campo input customizado (ControlValueAcessor)
• Formulários reativos: Classe base para Forms (herança no Angular)
• Formulários reativos: Combobox aninhado: Estado + Cidade

Detalhes do Formulário

• Validação campo nome (Obrigatoriedade);

• Validação campo E-mail:

  • verificação de e-mail;
  • válido campo obrigatório;
  • confirmação de e-mail;

• Cep:

  • validação campo obrigatório

  • preenchimento automático

    • Complemento;
    • Rua;
    • Bairro;
    • Cidade (Select - Mostra somente as cidades do estado carregado);
    • Estado (Select);

    

• Cargo(Select);

• Tecnologias;

• Newsletter(RadioButton);

• Frameworks(CheckBox);

• Aceito os termos(Checkbox):

  • Validação de envio de formulário somente se estive assinalado;

  

• Submit/Cancelar:

  • Só envia o formulario se todos campos obrigatorios estiverem preenchidos;
  • Cancela o preenchimento apagando todos os itens dos campos;

  

Detalhes do Form (Corpo da Requisição)