I'm having a question regarding the best way to organize my error messages within Ionic 3 using Angular 6.
I created an array of messages inside my recovery-passwrod.ts:
validation_messages = {
'cpf': [
{ type: 'required', message: 'O CPF precisa ser preenchido' },
{ type: 'minlength', message: 'O campo de CPF precisa ter no mínimo 11 digitos' },
{ type: 'maxlength', message: 'O campo de CPF precisa ter no máximo 11 digitos' },
{ type: 'pattern', message: 'O campo de CPF deve conter apenas números' },
]}
Inside of my recovery-password.html I called the form handling this way:
<form novalidate [formGroup]="formRecoveryPass">
<div class="form-group">
<ion-item>
<label>CPF</label>
<ion-input type="text" placeholder="CPF" [(ngModel)]="userModel.cpf" [brmasker]="{mask:'000.000.000-00', len:14}" formControlName="cpf"></ion-input>
</ion-item>
<ng-container *ngFor="let validation of validation_messages.cpf">
<div *ngIf="formRecoveryPass.controls['cpf'].hasError(validation.type) && formRecoveryPass.controls['cpf'].dirty && formRecoveryPass.controls['cpf'].touched">
{{ validation.message }}
</div>
</ng-container>
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg active" [disabled]="!formRecoveryPass.valid">Resetar senha</button>
</div>
</form>
My question is about repeating code in other situations so I will probably use the CPF field. How could I organize input messages?
My idea was to have a repository to gather all the possible messages for each field. Is it possible?
What is the best way? Using components?