Estoy teniendo algunos problemas con la visualización de mensajes de error para el atributo maxlength en Angular.

Problema

Desde el atributo maxlength no permitir más caracteres que la cantidad especificada, estoy teniendo problemas para mostrar mi mensaje de error. Hay alguna forma de activar el comportamiento predeterminado (permitir al usuario escribir más caracteres), con el fin de mostrar el mensaje de error.

Código para textarea

<textarea maxlength="10"
          [(ngModel)]="title.value"
          #title="ngModel"></textarea>

Código Angular de validación

<div *ngIf="title.errors && (title.dirty || title.touched)"
      class="alert alert-danger">
    <div [hidden]="!title.errors.maxlength">
      Only 10 characters allowed.
  </div>
</div>

Si quieres que me proporcione cualquier información adicional, por favor hágamelo saber.

  • ¿qué es el título en title.errors ? hizo u declarado en alguna parte ?..
  • el título se refiere a la ngModel de la caja de texto. Se me olvidó introducir esa información.
  • ¿El uso de ‘novalidate’ atributo de la etiqueta form?
  • si utiliza maxlength , usted no tendrá que mostrar un mensaje de error porque u r no se permite escribir más de 10 caracteres , creo que el título.los errores no contiene ningún error, incluso si la entrada contiene más caracteres que maxLength , u puede utilizar formas Reactivas para validar el formulario de control.
  • El título.errores.maxlength funciona bien. Algunos de los contenidos que puedo cargar en mi solicitud, ya contiene más de 10 caracteres. Cuando puedo eliminar uno, me sale el mensaje. El problema es que el atributo no me permite escribir más. Me gustaría mostrar el mensaje de error, por lo que el usuario entienda la razón de su no se les permite escribir sobre el límite especificado.
  • Yo no uso el ‘novalidate’ atributo.
  • así que como he dicho u puede utilizar Reactive forms para hacer su validación correctamente. puedo dar un ejemplo, si u quiere trabajar con ella 🙂
  • Yo realmente apreciaría que 🙂

2 Comentarios

  1. 7

    Puede lograr mediante el establecimiento de la condición directamente en la longitud de la entrada. Una etiqueta span con *ngIf puede mostrar/ocultar el mensaje de error:

    HTML

    <textarea class="form-control" id="title" maxlength="10" 
    type="number" name="title" [(ngModel)]="titleModel"></textarea> 
    <span style="color:red" *ngIf="titleModel?.length > 10">
          10 max
    </span>
    

    Clase:

      titleModel = 'I have more than 10 characters'
    


    DEMO

  2. 5

    puede trabajar con formas Reactivas para validar correctamente el formulario,
    he aquí un ejemplo sencillo de cómo utilizar formas reactivas :

    import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    
    @Component({
      selector: 'title-form',
      template: `
        <form novalidate [formGroup]="myForm">
          <label>
            <span>Full title</span>
            <input type="text" placeholder="title.." formControlName="title">
          </label>
          <div*ngIf="myForm.controls['title'].touched && myForm.get('title').hasError('required')">
            Name is required
          </div>
          <div *ngIf="myForm.controls['title'].touched && myForm.controls['title'].hasError('maxlength')">
            Maximum of 10 characters
          </div>
        </form>
      `
    })
    export class TitleFormComponent implements OnInit {
      myForm: FormGroup;
      constructor(private fb: FormBuilder) {}
      ngOnInit() {
        this.myForm = this.fb.group({
          title: ['', [Validators.required, Validators.maxLength(10)]],
        });
      }
    
    }
    

    espero que ayude u 🙂

Dejar respuesta

Please enter your comment!
Please enter your name here