es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo puedo crear un campo de formulario reactivo en Angular que utilice mat-error para mostrar los errores de validación tan pronto como se carga el formulario?

¿Cómo puedo crear un campo de formulario reactivo en Angular que utilice mat-error para mostrar los errores de validación tan pronto como se carga el formulario?

05 Aug, 2023 Programación

En este momento se carga con un campo vacío y si hago clic en el campo y luego hago clic fuera, luego se muestra el error de validación. Pero quiero que se muestre al cargar la página. Este es el HTML:

<!-- language: lang-html -->

  get fcnReqDesc() { return this.fgOrderForm.get('fcnReqDesc'); }

<!-- language: lang-html -->

 <mat-error *ngif="fcnReqDesc.errors" class="error">
   <span *ngif="fcnReqDesc.errors.required">Descripción de la Requisición es
    <strong>requerida</strong></span>
 </mat-error>

Y aquí hay una versión que funciona pero no utiliza “mat-error”:

<!-- language: lang-html -->

<p *ngif="fcnReqDesc.invalid" class="error">
  <span>Descripción de la Requisición es <strong>requerida</strong></span>
</p>

He intentado algunas ideas de Stack Overflow pero no funcionan:

<!-- language: lang-html -->

// setTimeout(() => {
//   this.fgOrderForm.patchValue({
//     fcnReqDesc: ''
//   });
// })

// this.fgOrderForm.get('fcnReqDesc').setValidators([Validators.required]);
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para que el error de validación se muestre al cargar la página en formularios reactivos de Angular con mat-error, intenta establecer el valor inicial del control como null o una cadena vacía, y luego ejecutar inmediatamente la lógica de validación.

    Aquí tienes un ejemplo:

    get fcnReqDesc() {
  const control = this.fgOrderForm.get('fcnReqDesc');
  control.setValidators(Validators.required);
  control.updateValueAndValidity();
  return control;
}

    Este fragmento de código establece los validadores para el control fcnReqDesc como requeridos, y luego actualiza inmediatamente su valor y estado de validez para activar el error de validación.

    Luego puedes usar este control en tu HTML de la siguiente manera:

    <mat-form-field>
  <input matinput="" placeholder="Descripción de la Requisición" formcontrolname="fcnReqDesc">
  <mat-error *ngif="fcnReqDesc.invalid">La descripción de la requisición es <strong>obligatoria</strong>.</mat-error>
</mat-form-field>

    Esto debería mostrar el mensaje de error de validación al cargar la página si el valor del control es null o vacío.

Comments are closed.