How to organize form messages in Ionic 3 project?

Asked

Viewed 27 times

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.

  • 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...

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.