How to organize enum in an Ionic project 3

Question

How to organize enum in an Ionic project 3

Navigation

#1 by (0 votes)

0

I have a static message group for validating form fields. These messages are present throughout the application and so I would like to use some way to make them dynamic and organized within the framework.

Today I have the group organized inside my .ts in this 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 any other way with "pipe, component"?

enums ionic typescript angular

asked by anonymous 03.01.2019 / 19:03

1 answer

Validate fields within separate divs in a single form Popular Select with XML - Logic

score 0 · Answer 1

I was able to resolve it as follows:

I've created a structure like this:

My Projects folder

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