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" ?