0
I’m having a question as to how best to organize my error messages within Ionic 3 using Angular 6.
I created within my Recovery-passwrod.ts an array of messages :
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' },
]}
Within my Recovery-password.html I called the form handling that 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 that I will probably use the CPF field. How I could organize input processing messages ?
My idea was to have a repository to gather all possible messages for each field. It would be possible?
What’s the Best Way? Using Components?
You can have a function that maps the form error to your message in the same place you have the validation_messages.
– Eduardo Vargas
Perfect Eduardo, but would it be better to use as a component? My goal is to have a "repository" of messages and be able to use in different components or pages.. My question is about how best to "import" this "function"... It would be a Component, a pipe, a directive...
– douglas baptista