Home / Questions / 342338
Accepted
Cristian Budzicz
Asked: 2020-04-01 12:01:16 +0800 CST 2020-04-01 12:01:16 +0800 CST

Angular - Reactive form validations in HTML

  • 772

Is there a way to pass the validations that are done on the fields of a reactive form (in the .html) to the component file (.ts). So that the template is clean and without the logic.

For example, I have a form with the following logic

<div class="form-group">
            <label for="correo">Correo</label>
            <input formControlName="correo" type="text" class="form-control" id="correo"  placeholder="Ingrese su correo">
            <small id="nombreHelp" class="form-text text-muted">No mostraremos tu correo.</small>
          </div>
    <div class="errorCodigo" 
          *ngIf="formulario.controls.correo.touched &&
          formulario.controls.correo.hasError('pattern')">
            El formato del correo no es valido
    </div>
    <div class="errorCodigo" 
      *ngIf="formulario.controls.correo.touched &&
      formulario.controls.correo.hasError('required')">
        El campo es requerido
    </div>

How can I move the validations that are shown with the ngIf to the component, so that it is the one that returns the corresponding error?

angular

2 Answers

  1. Best Answer

    I found the following way

    1) In the component (.ts file) I declare a json array with the error messages, for example:

      private mensajesErrores: any = {
'razonSocial' : {
  'minLength' : 'El nombre no debe tener menos de 3 caracteres',
  'maxLength' : 'El nombre no debe tener mas de 10 caracteres',
  'required'  : 'Campo obligatorio'
},
'fechaInicioActividad' : {
  'required'  : 'Campo obligatorio'
},
'email' : {
  'required'  : 'Campo obligatorio',
  'maxLength' : 'El correo no debe tener mas de 10 caracteres',
  'email'     : 'El formato del correo no es correcto',
}
  };

    The properties 'minLenght', 'required' and others are the validations that I declare with the form. See the following code

    this.formGroup = this.formBuilder.group({
  razonSocial: 
      ['',
          [
            Validators.minLength(3),
            Validators.maxLength(10),
            Validators.required
          ]
      ],
  fechaInicioActividad: 
      ['',
        [
          Validators.required,
        ]
      ],
  email: 
      ['',
          [
            Validators.required,
            Validators.maxLength(100),
            Validators.email
          ]
      ]
});

    2) Create an auxiliary function that receives the name of the input (for example 'Social Reason'):

    public getError(controlName: string): string {
// retorna los datos ingresados en el form
// console.log( this.formGroup.value);
// 
let error = '';
const control = this.formGroup.get(controlName);
if (control.touched && control.errors) {

  // la variable 'control.errors' nos devuelve un par del tipo '{"required":true}' 
  let key = Object.keys(control.errors)[0];
  let value = Object.values(control.errors)[0];
  // console.log(this.mensajesErrores[controlName][key]);
  error = this.mensajesErrores[controlName][key];
}
return error;
}

    The function receives the name of the input and queries, if it was touched and there is an error, it searches the json array (the one from step 1) to return the corresponding error message.

    3) In the html file, we make a call like this:

    <span>{{ getError('fechaInicioActividad')}}</span>

    This will allow us to display the custom error messages we defined.

    Edit

    If you are working in angular material, in the html you should show the errors like

        <mat-error>
      {{ getError('razonSocial')}}
    </mat-error>
    • 1 
  2. maxLength cambiar por maxlength
minLength cambiar por minlength
    • 0