0
124
ViewsProblemas al usar el atributo maxlength en la entrada de texto en angular
Estoy tratando de usar el atributo maxlength en un campo de entrada. a continuación está mi componente HTML.
<div class="input-box-wrapper df" *ngIf="info[1] == false; else password"> <label class="lable" for="{{info[4]}}">{{info[0]}}</label> <input class="p-10px cw" 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 df pr"> <label class="lable" for="{{info[4]}}">{{info[0]}}</label> <input class="p-10px cw" type="{{info[3]}}" #password1 id="{{info[4]}}" placeholder="{{info[2]}}" (blur)="getValue($event)"> <i class="fa fa-eye-slash pa icon" aria-hidden="true" #icon1 (click)="chnageIcon()"></i> <i class="fa fa-eye pa icon show" aria-hidden="true" #icon2 (click)="chnageIcon()"></i> </div> </ng-template>Recibo el siguiente error:
Si configuro una longitud máxima fija (por ejemplo, longitud máxima = "10"), todo funciona bien. Me parece un error, pero avísame si estoy haciendo algo mal.
·
Juan Pablo Isaza
2 answers
Answer question0
La interpolación y el enlace de propiedades solo pueden establecer propiedades, no atributos. maxlength es un atributo, no una propiedad nativa, por eso obtiene el error anterior.
Usar enlace de atributo
[attr.maxlength]="variable_name"
<input class="p-10px cw" type="{{info[3]}}" id="{{info[4]}}" placeholder="{{info[2]}}" [attr.maxlength]="info[6]" (blur)="getValue($event)">
·
Juan Pablo Isaza
Report
0
Otra forma de escribir esto es:
<input class="p-10px cw" type="{{info[3]}}" id="{{info[4]}}" placeholder="{{info[2]}}" [maxLength]="info[6]" (blur)="getValue($event)">Y, de manera general, puede usar los corchetes alrededor de un atributo y usar directamente una variable en lugar de usar la interpolación.
Por ejemplo, podrías haber escrito:
<input class="p-10px cw" [type]=info[3] [id]=info[4] [placeholder]=info[2] [maxLength]=info[6] (blur)="getValue($event)">
·
Juan Pablo Isaza
Report
Answer question