如何使用Angular隐藏输入

Question

我在应用程序中使用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();

我不了解Angular如何对待DOM中所有隐藏的元素？但看起来我可以达到但不使用它。

Answer 1

首先，您应该决定是否要隐藏输入并使用纯js / html或使用Angular功能获取输入，因为您发布的代码行使用的是原始javascript。这样，您应该尝试使用属性visibility: hidden添加到输入CSS样式。

要使用Angular隐藏它，您应该使用方括号表示法来绑定hidden属性，例如：[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">

Answer 2

有条件地隐藏该字段怎么办？

<input [hidden]="!isInputShown" type="text" id="cardNumber" formControlName="cardNumber" [(ngModel)]="refresh">

并且在您的ts中是这样的：

hideInput() {
    this.isInputShown = true;
}

hideInput() {
    this.isInputShown = false;
}

然后只需调用这些方法即可隐藏/显示。