1

Tomo como ejemplo este:

El html

<div class="md-form">
  <input mdbInputDirective type="text" id="nombre" class="form-control" formControlName="nombre">
  <label for="nombre">Nombre</label>
</div>

El ts:

this.crearForm = this.formBuilder.group({
  nombre: new FormControl('', [
    Validators.required,
    Validators.minLength(4),
  ]),
});

Como se ve tiene 2 validaciones:

1- cuando es requerido, este envía el msj: wrong

2- cuando requiere mínimo 4 caracteres, este también envía el msj: wrong

Cuando todo esta correcto envía el msj success.

¿Como puedo modificar cada uno de los mensajes?

Es decir:

1- cuando es requerido, este envíe el msj: Campo requerido

2- cuando requiere mínimo 4 caracteres, este también envíe el msj: Mínimo 4 caracteres

Cuando todo esta correcto envíe el msj Correcto.

2 respuestas 2

5

Segun dice en https://angular.io/guide/form-validation se pueden diferenciar los mensajes en la vista segun el error

 <div *ngIf="nombre.errors.required">
    Nombre requerido.
 </div>
 <div *ngIf="nombre.errors.minlength">
    Nombre debe tener al menos 4 caracteres.
 </div>
2

Puedes crearte un servicio con una función que puedas utilizar para saber si el valor de cada campo del formulario es válido y regresar el mensaje de error correspondiente

Crear un servicio validator.service.ts

import { Injectable} from '@angular/core';
import { FormGroup} from '@angular/forms';
@Injectable()
export class ValidatorService {

    public errorMessage: string;
    /**
     * @summary Usada para saber si un campo es valido o no
     * @param _field FormControlName ==> campo a validar
     * @param _form FormGroup ==> Formulario al que pertenece el campo a validar
     * @return boolean => true: válido | false = inválido
     */
    public isValid(_field: string, _form: FormGroup): boolean {
        if (_form.get(_field).invalid && _form.get(_field).touched) {
            if (_form.get(_field).errors.required) {
                this.errorMessage = "Campo requerido";
                return false;
            }
            if (_form.get(_field).errors.minlength) {
                this.errorMessage = "Mínimo" + _form.get(_field).errors.minlength.requiredLength + " caracteres";
                return false;
            }
        }
        return true;
    }
}

En tu módulo:

  1. Importar el servicio
  2. Agregarlo en providers

import { ValidatorService } from './_services/validator.service.ts';

providers: [ValidatorServicice]

En tu componente:

  1. Importar el servicio
  2. Inyectar el servicio en el método constructor

import { ValidatorService } from '../../../../_services/validator.service.ts';

constructor(public _validator: ValidatorService) {}

En tu vista:

<form [formGroup]="fgTest">
    <div class="md-form">
        <input mdbInputDirective type="text" id="nombre" class="form-control" formControlName="nombre">
            <div *ngIf="!_validator.isValid('nombre', fgTest)">
                <span style="color: #f4516c;">
                    {{ _validator.errorMessage }}
                </span>
        </div>
        <label for="nombre">Nombre</label>
    </div>
</form>

Cabe señalar que de esta manera se implementó solo para mostrar un mensaje de error, el primer mensaje de error que encuentre.

O la otra opción es hacer en la vista parte de las validaciones que hace la función isValid y replicarlo por cada elemento de tu formulario.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.