Angular validation message for maxlength attribute

Question

I'm having some trouble with displaying error messages for the maxlength attribute in Angular.

Problem

Since the maxlength attribute don't allow more characters than the specified amount, I'm having trouble displaying my error message. Is there any way to turn of the default behavior (allow the user to type more characters), in order to display my error message.

Code for textarea

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

Code for Angular validation

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

If you want me to provide any additional information, please let me know.

what is title in title.errors ? did u declared somewhere ?.. — Mohamed Ali RACHID
– Mohamed Ali RACHID, Commented Oct 10, 2017 at 13:10
title referes to the ngModel of the textarea. I forgot to enter that information. — Mathis Garberg
– Mathis Garberg, Commented Oct 10, 2017 at 13:13
if you use maxlength , you will not need to show a error message because u r not allowed to write more than 10 characters , i think title.errors will not contains any errors even if the input contains more characters than maxLength , u can use Reactive forms to validate your form control. — Mohamed Ali RACHID
– Mohamed Ali RACHID, Commented Oct 10, 2017 at 13:25
The title.errors.maxlength works fine. Some of the content I load in to my application, already conatins more than 10 characters. When I delete one, I get the message. The problem is that the attribute don't allow me to type more. I would like to show the error message, so the user understands why their not allowed to type over the specified limit. — Mathis Garberg
– Mathis Garberg, Commented Oct 10, 2017 at 13:39

Mohamed Ali RACHID · Accepted Answer · 2017-10-10 14:10:17Z

you can work with Reactive forms to validate properly your form, here is a simple example how to use reactive forms :

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

}

hope it helps u :)

Vega · Accepted Answer · 2020-02-11 08:50:53Z

9

You can achieve it by setting the condition directly on the length of the input. A span tag with *ngIf can show/hide the error message:

HTML

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

Class: ...

  titleModel = 'I have more than 10 characters'

... DEMO

edited Feb 11, 2020 at 8:50

answered Oct 10, 2017 at 14:49

Vega

28.8k28 gold badges121 silver badges151 bronze badges

6 Comments

Mathis Garberg Over a year ago

Quick and easy fix. Love it.

Koja Over a year ago

This answer doesn't allow the user to enter more characters, so it doesn't solve the original problem.

Koja Over a year ago

I wanted to allow the user to type in more characters than the maximum validation length, and react on that (disable submit and show an error). Mohamed's answer below helped me achieve that.

Vega Over a year ago

@Koja 1. if you remove mxLength, you will be able to achieve it 2. The Question expressly uses ngModel and not reactive forms! So my answer is more appropriate

Vega Over a year ago

@Koja, My answer is for a specific setup, no form is involved. If you need validation for the form, of course reactive forms provide every tool, I say go for it. The OP had no reactive form but had ngModel, I provided an answer that solved the situation and they accepted this answer

|

Collectives™ on Stack Overflow

Angular validation message for maxlength attribute

2 Answers 2

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related