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.

Solution 1

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

Solution 2

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

Comments

[Mathis Garberg]

Quick and easy fix. Love it.

[Koja]

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

[Koja]

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]

@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

[Koja]

You are right, it does work. But if you want to show an error message and disable submit when .length > 10 , you need to write that rule two times in the template for each input that you wish to validate.

[Vega]

@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