Message de validation angulaire pour l'attribut maxlength

Question

Je rencontre des problèmes lors de l'affichage des messages d'erreur pour l'attribut maxlength dans Angular.

Problème

Depuis l'maxlength attribut ne permettent pas plus de caractères que le montant indiqué, je vais avoir des difficultés à afficher mon message d'erreur. Est-il possible de désactiver 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 pour la validation angulaire

<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 me voulez fournir toute information supplémentaire, s'il vous plaît laissez-moi savoir.

Answer 1

vous pouvez travailler avec des formes réactives pour valider correctement votre formulaire, voici un exemple simple comment utiliser des 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)]], 
    }); 
    } 

} 

it helps u :)

Answer 2

Vous pouvez y arriver par réglage de l'état directement de la longueur de l'entrée:

<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> 

DEMO