1

Estoy intentando agregar mensajes de validación en Angular 4 obtenidos desde la Api en mi formulario, he estado checando que puedo utilizar Renderer2 y ElementRef pero no encuentro como buscar el input por Id y agregar el mensaje debajo de él.

En AngularJs era posible agregar un mensaje en la etiqueta "P" dinámicamente de la siguiente forma:

angular.element('#'+key).parent().find("p").html(msg.ErrorMessage);

El código de mi formulario es el siguiente:

<div class="form-group">
    <label for="serie">Serie</label>
    <input class="form-control" type="text" name="serie"
 [(ngModel)]="serie" #serie="ngModel" required />
   <p class="help-block">
     // Insertar mensaje aquí
   </p>
</div>

Y el objeto que yo recibo de la Api puede ser de la siguiente forma:

[{ element: 'serie', message: 'La serie ya ha sido agregada anteriormente.'}]

Artículo de referencia de uso de Renderer2 y ElementRef Using Renderer2 in Angular.

¿Es posible agregar un mensaje de forma dinámica teniendo el Id del input y el mensaje que se va a agregar?

1 respuesta 1

0

Y no es más sencillo añadir el div en tu template y sólo generarlo cuando hace falta?

Pones algo así en tu template:

<div class="form-group">
    <label for="serie">Serie</label>
    <input class="form-control" type="text" name="serie" [(ngModel)]="serie" #serie="ngModel" required />
    <p *ngIf="isValid('serie')" class="help-block">
        // Insertar mensaje aquí
    </p>
</div>

Y añades una función isValid( a tu componente formulario donde compruebas si el valor del input es correcto o no.

3
  • Si yo recibo de la Api los campos que tienen error, de esa forma guardaría un arreglo con los datos y al validar que si se regresó un mensaje de error podría mostrar ese mensaje. Pero es conveniente hacer eso para cada campo de cada formulario? Commented el 21 sept. 2017 a las 20:08
  • Yo lo hago así, incluso añado clases al div form-group para que se marque el input con borde rojo cuando no es válido Commented el 22 sept. 2017 a las 7:17
  • Al final lo dejé como me comentas, solo que no lo valido con ngIf, si el servidor me regresó errores los agrego a un arreglo de ese campo y en el template recorro los errores por si hay más de un mensaje y también agrego la clase has-error para que lo muestre como error, gracias! Commented el 27 sept. 2017 a las 11:20

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.