javascript - maxlegth not working using template driven form in angular 6 - Stack Overflow

admin管理员组

文章数量:1391937

I am developing one register form in that form i need maxlength validation but using template driven form can't show maxlength alert message.

<input  type="text" class="form-control" placeholder="Enter  Name"maxlength="4" 
        name="name"  [(ngModel)]="name" ngModel required #username="ngModel">
<div *ngIf="username.invalid && (username.dirty || username.touched)">
    <p style="color:red;font-size:10px;" *ngIf='username.invalid.maxlength'>
        You enter only 4 characters.
    </p>
</div>

I am developing one register form in that form i need maxlength validation but using template driven form can't show maxlength alert message.

<input  type="text" class="form-control" placeholder="Enter  Name"maxlength="4" 
        name="name"  [(ngModel)]="name" ngModel required #username="ngModel">
<div *ngIf="username.invalid && (username.dirty || username.touched)">
    <p style="color:red;font-size:10px;" *ngIf='username.invalid.maxlength'>
        You enter only 4 characters.
    </p>
</div>

• javascript
• angular
• angular6

Share Improve this question Follow edited Dec 24, 2018 at 7:45 Jai 74.7k1212 gold badges7676 silver badges104104 bronze badges asked Dec 24, 2018 at 7:39 user10217724user10217724 1

• 2 [(ngModel)]="name" ngModel Does these two required? – Jai Commented Dec 24, 2018 at 7:46

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

Try:

<form name="form" role="form" #form="ngForm">
  <div class="form-group">
    <label class="form-control-label" for="userName">UserName</label>
      <input 
             type="userName" 
             class="form-control" 
             id="userName" 
             name="userName"                              
             #userNameInput="ngModel" //ngModel variable and template variable should not be the same
             [(ngModel)]="userName" 
             minlength=4 
             maxlength=50 
             required>
      <div *ngIf="userNameInput.dirty && userNameInput.invalid">
        <small class="form-text text-danger" *ngIf="userNameInput.errors.required">
                            Your userName is required.
        </small>
        <small class="form-text text-danger" *ngIf="userNameInput.errors.minlength">
                            Your userName is required to be at least 4 characters.
        </small>
        <small class="form-text text-danger" *ngIf="userNameInput.errors.maxlength">
                            Your username cannot be longer than 50 characters.
        </small>
      </div>
  </div>
</form>

DEMO

For me, the issue was input type="number".

Once I removed the type number maxLength worked.

Angular version: 8

username.invalid will be username.errors?

*ngIf="username.errors?.maxlength"

so there are a couple of steps to follow to validate your input like

please check this

<input
  type="text"
  placeholder="Your full name"
  name="name"
  ngModel
  #userName="ngModel"
  maxlength="4"
  required>

<div *ngIf="userName.errors?.minlength && userName.touched" class="error">
  Minimum of 4 characters
</div>

?.prop is called the “Safe navigation operator”

that means it avoids an exception for null and undefined values in in property paths

As if you use maxlength property for input type it does not allows a user to type anything beyond that length [As I tested in Chrome].

So if you want to display an alert or error message then you can check for input's length property and display error message:

HTML:

Remove maxlength from input type and check for username.value?.length in if condition

<input  type="text" class="form-control" placeholder="Enter  Name" name="username" [(ngModel)]="name" ngModel required #username="ngModel">
  <div *ngIf="username.value?.length > 4">
    <p style="color:red;font-size:10px;">
       You enter only 4 characters.
    </p>
  </div>

WORKING DEMO

I needed to validate the length using the template only and I need it to invalidate the form as well so here is what I did using pattern

<textarea class="form-control" id="Command" rows="3" name="dialogCommand" pattern="^(.|\n){0,4000}$" #ment="ngModel" [(ngModel)]="ment" [ngClass]="{ 'is-invalid': ment?.errors?.pattern }"></textarea>

<div class="text-danger small" *ngIf="ment?.errors?.pattern">The ment cannot be greater than 4000 characters long</div>

This will count on multiple lines.

Hope this helps someone

本文标签： javascriptmaxlegth not working using template driven form in angular 6Stack Overflow