0
245
VistasProblems using the maxlength attribute on text input in angular
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
·
Santiago Trujillo
2 Respuestas
Responde la pregunta0
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)">
·
Santiago Trujillo
Denunciar
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)">
·
Santiago Trujillo
Denunciar
Responde la pregunta