Angulaire message de validation pour l'attribut maxlength

Je vais avoir quelques problèmes avec l'affichage des messages d'erreur pour l'attribut maxlength Angulaire.

Problème

Depuis l'attribut maxlength ne permettent pas plus de caractères que le montant déterminé, je vais avoir des difficultés pour afficher mon message d'erreur. Est-il possible de transformer le comportement par défaut (permettre à l'utilisateur de taper plus de caractères), afin d'afficher mon message d'erreur.

Code pour textarea

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

Code Angulaire de validation

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

Si vous voulez me fournir toute information supplémentaire, s'il vous plaît laissez-moi savoir.

  • quel est le titre de title.errors ? u ne a déclaré quelque part ?..
  • le titre renvoie à la ngModel de la textarea. J'ai oublié de saisir cette information.
  • Avez-vous utilisé 'novalidate' attribut dans la balise form?
  • si vous utilisez maxlength , vous n'aurez pas besoin d'afficher un message d'erreur car u r de ne pas écrire plus de 10 caractères , je pense que le titre.les erreurs ne contient pas d'erreurs, même si l'entrée contient plus de caractères que maxLength , u peut utiliser des formes Réactives de valider votre formulaire de contrôle.
  • Le titre de propriété.erreurs.maxlength fonctionne très bien. Une partie du contenu que je charge dans mon application, contient déjà plus de 10 caractères. Quand je supprime un, je reçois le message. Le problème est que l'attribut ne pas me permettre de taper plus. Je voudrais montrer le message d'erreur, afin que l'utilisateur comprenne pourquoi ne pas leur permis de type-dessus de la limite spécifiée.
  • Je n'ai pas utilisé le "novalidate' attribut.
  • donc, comme je l'ai dit u peut utiliser Reactive forms faire votre validation correctement. je peux donner un exemple si tu veux travailler avec elle 🙂
  • J'apprécierais vraiment qu' 🙂

InformationsquelleAutor Mathis Garberg | 2017-10-10
  1. 7

    Vous pouvez l'atteindre par la définition de la condition directement sur la longueur de l'entrée. Une balise span avec *ngIf pouvez afficher/masquer le message d'erreur:

    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>

    Classe:
    ...

      titleModel = 'I have more than 10 characters'

    ...
    DÉMO

    • Aussi, s'il vous plaît vérifier : stackoverflow.com/a/46026509/5468463
    • Rapide et facile à fixer. L'amour c'.
    • Vous avez absolument raison. Ce doit être la accepté de répondre.
    InformationsquelleAutor Vega
  2. 5

    vous pouvez travailler avec des formes Réactives de valider correctement votre formulaire,
    voici un exemple simple comment utiliser les formes réactives :

    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)]],
    });
  }

}

    espère que cela aide u 🙂

    InformationsquelleAutor Mohamed Ali RACHID