Problems using the maxlength attribute on text input in angular

Question

I'm trying to using the maxlength attribute on an input field. below is my component HTML.

<div class="input-box-wrapper d-f" *ngIf="info[1] == false; else password">
    <label class="lable" for="{{info[4]}}">{{info[0]}}</label>
    <input class="p-10px c-w" type="{{info[3]}}" id="{{info[4]}}" placeholder="{{info[2]}}" maxlength="{{info[6]}}" (blur)="getValue($event)">
    <div>{{info[6]}} that works fine</div>
</div>

<ng-template #password>
    <div class="input-box-wrapper d-f p-r">
        <label class="lable" for="{{info[4]}}">{{info[0]}}</label>
        <input class="p-10px c-w" type="{{info[3]}}" #password1 id="{{info[4]}}" placeholder="{{info[2]}}" (blur)="getValue($event)">
        <i class="fa fa-eye-slash p-a icon" aria-hidden="true" #icon1 (click)="chnageIcon()"></i>
        <i class="fa fa-eye p-a icon show" aria-hidden="true" #icon2 (click)="chnageIcon()"></i>
    </div>
</ng-template>

I'm getting the following error:

If I set a fixed maxlength (ex. maxlength="10") everything works fine. It seems a bug to me, but please let me know if I'm doing something wrong

use [maxlength]="info[6]" and also for other binded attributes. also, add FormsModule in module imports:[], part. — Mazdak
– Mazdak, Commented Aug 11, 2021 at 9:42
only info[6] not working on maxlenth that's works on <div>info[6]</div> too — FTU playz
– FTU playz, Commented Aug 11, 2021 at 9:48
I was wrong [attr.minlength]="min" is ok because minlength is attribute, not a native property. — Mazdak
– Mazdak, Commented Aug 11, 2021 at 10:07

Rahul Kumar · Accepted Answer · 2021-08-11 09:46:03Z

1

Interpolation and property binding can set only properties, not attributes. maxlength is an attribute not a native property that's why you get above error.

Check Angular docs

Use attribute binding [attr.maxlength]="variable_name"

<input class="p-10px c-w" type="{{info[3]}}" id="{{info[4]}}" placeholder="{{info[2]}}" [attr.maxlength]="info[6]" (blur)="getValue($event)">

answered Aug 11, 2021 at 9:46

Rahul Kumar

3,1572 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Klaymant · Accepted Answer · 2021-08-11 11:07:45Z

0

Another way of writing this is :

<input class="p-10px c-w" type="{{info[3]}}" id="{{info[4]}}" placeholder="{{info[2]}}" [maxLength]="info[6]" (blur)="getValue($event)">

And in a general manner you can use the brackets around an attribute and use directly a variable instead of using the interpolation.

For instance you could have written :

<input class="p-10px c-w" [type]=info[3] [id]=info[4] [placeholder]=info[2] [maxLength]=info[6] (blur)="getValue($event)">

edited Aug 11, 2021 at 11:07

answered Aug 11, 2021 at 10:59

Klaymant

1786 bronze badges

Collectives™ on Stack Overflow

Problems using the maxlength attribute on text input in angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related