0

Possuo um grupo de mensagens estáticas para validação de campos de formulário. Essas mensagens estão presentes por toda a aplicação e por isso gostaria de usar alguma maneira de torná-las dinâmicas e organizadas dentro da estrutura.

Hoje eu tenho o grupo organizado dentro do meu .ts dessa maneira por exemplo:

login.ts

  validation_messages = {
'email': [
  { type: 'required', message: 'O email precisa ser preenchido' },
],
'password': [
  { type: 'required', message: 'A senha precisa ser preenchida' },
  { type: 'minlength', message: 'O campo de senha precisa ter no mínimo 8 digitos' },
  { type: 'maxlength', message: 'O campo de senha precisa ter no máximo 16 digitos' },
]};

login.html

<form novalidate [formGroup]="formLogin">

      <ion-item>
        <label>Email</label>
        <ion-input type="email" placeholder="Digite seu email" [(ngModel)]="userModel.email" formControlName="email"></ion-input>
      </ion-item>

      <ng-container *ngFor="let validation of validation_messages.email">
        <div *ngIf="formLogin.controls['email'].hasError(validation.type) && formLogin.controls['email'].dirty && formLogin.controls['email'].touched">
          {{validation.message}}
        </div>
      </ng-container>


      <ion-item>
        <label>Password</label>
        <ion-input type="password" placeholder="Digite sua senha" [(ngModel)]="userModel.password" formControlName="password"></ion-input>
      </ion-item>

      <ng-container *ngFor="let validation of validation_messages.password">
        <div *ngIf="formLogin.controls['password'].hasError(validation.type) && formLogin.controls['password'].dirty && formLogin.controls['password'].touched">
          {{validation.message}}
        </div>
      </ng-container>

      <div class="form-group">
        <button class="btn btn-primary btn-lg active" (click)="doLogin()" [disabled]="!formLogin.valid">Entrar</button>
      </div>
    </form>

Existe alguma forma de organizar essas mensagens estáticas com ENUM, ou existe algum outro caminho com "pipe, component" ?

1 Resposta 1

0

Consegui resolver da seguinte forma:

Criei uma estrutura como essa :

MeuProjeto pastas

├── /meuprojeto
└── /node_modules               
└── /src                
    └── /app
    └── /assets             
    └── /components              
    └── /directives              
    └── /enums    
    └── /environments              
    └── /model              
    └── /pages
    └── /pipes
    └── /providers

Na pasta 'enums' eu criei um arquivo para gerenciar as mensagens :

.src/enums/validationMessages.ts

export enum Email {
required = <string>'O email precisa ser preenchido'}

E na minha view eu importei o enum desejado e usei da seguinte forma:

./src/pages/home.ts

import { Component } from '@angular/core';
/* Enums */
import { Email } from '../../../enums/validationMessages';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {  
constructor(){
  console.log(Email.required);
}
ionViewDidLoad() {}
2
  • cara não é recomendado ter uma arquitetura desse jeito separado pelo tipo do arquivo por não ser muito escalavel. Imagina quando vc tiver 100 componentes dentro de /componentes. vc teria um modulo pra todos? Nao é uma boa. Uma resposta mais completa aqui pt.stackoverflow.com/questions/302874/… Commented 3/01/2019 às 19:34
  • Legal Eduardo! Na verdade talvez você não tenha entendido meu real ponto, a sua indicação de artigo é correta e umas das formas de se criar uma estrutura de projeto sim. Existe uma estrutura na qual eu acho incrível e me atende sempre que é baseada nesse conceito aqui : github.com/Robinyo/ionic-angular-schematics ! Nesse exemplo lá em cima meu foco foi apenas ter um repositório para mensagens estáticas e não a estruturação de components... Commented 5/01/2019 às 1:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .