angular - 如何使用 Angular 隐藏输入
问题描述
我在我的应用程序中使用 USB 读卡器来填写输入表格。我正在尝试隐藏它并能够用我的卡标记以发送表格。
我试着用
<input hidden type="text" id="cardNumber" formControlName="cardNumber" [(ngModel)]="refresh">
和
<input type="hidden" id="cardNumber" formControlName="cardNumber" [(ngModel)]="refresh">
和
<input type="text" style="display:none" id="cardNumber" formControlName="cardNumber" [(ngModel)]="refresh">
但是一旦元素消失,我就无法用卡片填充它。我通过使用确保焦点始终存在
document.getElementById("cardNumber").focus();
我不明白 DOM 中的角度如何处理所有隐藏元素?但看起来我可以到达它但不能使用它。
解决方案
首先,您应该决定是否要隐藏输入并使用纯 js/html 或使用 Angular 功能来获取它,因为您发布的代码行使用的是 vanilla javascript。那样的话,您应该尝试使用 property 添加到输入 css 样式visibility: hidden
。
要使用 Angular 将其隐藏,您应该使用方括号表示法绑定隐藏属性,如下所示[hidden]="true"
:
您应该通过初始化 Angular Form 并通过 formControlName 查找输入来获取代码中的元素,这里有明确说明如何实现此目的的文档:https ://angular.io/api/forms/Form
如果您只有一个输入并且不想为它初始化整个表单,您可以尝试添加 ElementRef,代码将是这样的:
import {ElementRef} from '@angular/core';
@ViewChild('myInput') inputElement:ElementRef;
ngAfterViewInit() {
this.inputElement.nativeElement.focus();
}
<input #myInput [hidden]="true" [(ngModel)]="refresh">