How to organize forms messages in Ionic 3 project?

0

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?

    
asked by anonymous 25.12.2018 / 20:56

0 answers