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:
- Importar el servicio
- Agregarlo en providers
import { ValidatorService } from './_services/validator.service.ts';
providers: [ValidatorServicice]
En tu componente:
- Importar el servicio
- 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.