web-dev-qa-db-fra.com

Angular pour l'attribut maxlength

J'ai des problèmes avec l'affichage des messages d'erreur pour l'attribut maxlength dans Angular.

Problème

Étant donné que l'attribut maxlength n'autorise pas plus de caractères que la quantité spécifiée, j'ai du mal à afficher mon message d'erreur. Existe-t-il un moyen de désactiver le comportement par défaut (autoriser l'utilisateur à 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 pour Angular

<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 souhaitez que je vous fournisse des informations supplémentaires, veuillez me le faire savoir.

formsangularvalidationtextareamaxlength
8
Mathis Garberg

Vous pouvez y parvenir en définissant la condition directement sur la longueur de l'entrée. Une balise span avec * ngIf peut 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

7
Vega

vous pouvez travailler avec des formulaires réactifs pour valider correctement votre formulaire, voici un exemple simple d'utilisation des formulaires réactifs:

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

}

j'espère que ça vous aide :)

6
Mohamed Ali RACHID