How to organize Enum in an Ionic 3 project

Question

I have a group of static messages for form field validation. These messages are present throughout the application and so I would like to use some way to make them dynamic and organized within the structure.

Today I have organized group within my . ts that way for example:

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>

Is there any way to organize these static messages with ENUM, or is there some other way with "pipe, Component" ?

Answer 1

I was able to solve it this way:

I created a structure like this :

Meuproject folders

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

In the 'enums' folder I created a file to manage the messages :

.src/enums/validationMessages.ts

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

And in my view I imported the desired Enum and used it as follows:

./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() {}