{"id":27696195,"url":"https://github.com/mathvsk/multistep-form","last_synced_at":"2026-05-10T19:03:19.446Z","repository":{"id":289182338,"uuid":"970386919","full_name":"mathvsk/multistep-form","owner":"mathvsk","description":"Formulário multi-etapas em Angular.","archived":false,"fork":false,"pushed_at":"2025-04-22T00:18:35.000Z","size":1411,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-25T15:08:29.436Z","etag":null,"topics":["angular","scss"],"latest_commit_sha":null,"homepage":"https://mathvsk-multistepform.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mathvsk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-22T00:05:45.000Z","updated_at":"2025-04-22T00:19:17.000Z","dependencies_parsed_at":"2025-04-22T01:35:39.419Z","dependency_job_id":null,"html_url":"https://github.com/mathvsk/multistep-form","commit_stats":null,"previous_names":["mathvsk/multistep-form"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathvsk%2Fmultistep-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathvsk%2Fmultistep-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathvsk%2Fmultistep-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathvsk%2Fmultistep-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mathvsk","download_url":"https://codeload.github.com/mathvsk/multistep-form/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250840606,"owners_count":21495909,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","scss"],"created_at":"2025-04-25T15:08:33.720Z","updated_at":"2026-05-10T19:03:14.416Z","avatar_url":"https://github.com/mathvsk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MultistepForm\n![Angular](https://img.shields.io/badge/angular-%23DD0031.svg?style=for-the-badge\u0026logo=angular\u0026logoColor=white)\n![Static Badge](https://img.shields.io/badge/MIT-maker?style=for-the-badge\u0026label=License\u0026labelColor=%23303030\u0026color=%23808080)\n\n\u003cimg src=\".github/projeto.gif\" /\u003e\n\n## Sobre o projeto\n\nEste projeto é uma aplicação Angular(v19) que implementa um formulário multi-etapas com validação de campos, estilização personalizada e uma experiência de usuário fluida. Abaixo estão os principais destaques do código e da arquitetura do projeto.\n\n## Funcionalidades\n\n### 1. **Formulário Multi-Etapas**\nO componente [`MultistepFormComponent`](src/app/components/multistep-form/multistep-form.component.ts) gerencia um formulário dividido em três etapas. Cada etapa possui validações específicas e mensagens de erro amigáveis para o usuário.\n\n- **Validações Personalizadas**: Cada campo do formulário possui validações específicas, como o número mínimo de caracteres para o telefone e validação de e-mail.\n- **Mensagens de Erro Dinâmicas**: O método `getErrorMessage` fornece mensagens de erro dinâmicas e localizadas para cada campo.\n\n### 2. **Diretiva de Formatação de Telefone**\nA diretiva [`FormatPhoneDirective`](src/app/shared/directives/format-phone.directive.ts) formata automaticamente os números de telefone enquanto o usuário digita, garantindo uma entrada consistente e amigável.\n\n- **Reposicionamento do Cursor**: A diretiva mantém o cursor na posição correta mesmo após a formatação.\n- **Suporte a Diferentes Formatos**: Adapta-se dinamicamente ao comprimento do número de telefone.\n\n### 3. **Componentes Reutilizáveis**\nO projeto utiliza componentes reutilizáveis para melhorar a modularidade e a manutenibilidade do código:\n\n- [`StepsComponent`](src/app/components/steps/steps.component.ts): Exibe visualmente o progresso do formulário com estados de etapa (ativa, concluída, etc.).\n- [`StepsButtonComponent`](src/app/components/steps-button/steps-button.component.ts): Gerencia os botões de navegação entre as etapas.\n- [`FormFieldComponent`](src/app/components/form-field/form-field.component.ts): Simplifica a criação de campos de formulário com suporte a validações e mensagens de erro.\n\n### 4. **Estilização com SCSS**\nO projeto utiliza SCSS para criar estilos reutilizáveis e consistentes:\n\n- **Mixins Personalizados**: O arquivo [`variables.scss`](src/variables.scss) define mixins como `font-default` e `button`, que são amplamente utilizados para garantir consistência visual.\n- **Animações Suaves**: O botão de envio exibe uma animação de carregamento enquanto o formulário está sendo enviado.\n\n### 5. **Experiência do Usuário**\n- **Feedback Visual**: Estados como \"submetendo\" são claramente indicados ao usuário.\n- **Mensagens de Sucesso**: Após o envio do formulário, o usuário recebe uma mensagem de confirmação.\n\n## Como Executar o Projeto\n\n1. Instale as dependências:\n   ```bash\n   npm install\n   ```\n\n2. Inicie o servidor de desenvolvimento:\n   ```bash\n   npm start\n   ```\n\n3. Acesse a aplicação em [http://localhost:4200](http://localhost:4200).\n\n## Como Executar o Projeto\n\n1. Instale as dependências:\n   ```bash\n   npm install\n   ```\n\n2. Inicie o servidor de desenvolvimento:\n   ```bash\n   npm start\n   ```\n\n3. Acesse a aplicação em [http://localhost:4200](http://localhost:4200).\n\n## Conclusão\n\nEste projeto demonstra como criar uma aplicação Angular moderna e bem estruturada, com foco em modularidade, reutilização de código e uma experiência de usuário aprimorada. A implementação de recursos como a diretiva de formatação de telefone e os componentes reutilizáveis são exemplos de boas práticas que podem ser aplicadas em outros projetos.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathvsk%2Fmultistep-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmathvsk%2Fmultistep-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathvsk%2Fmultistep-form/lists"}