Angular 如何使用角度隐藏输入

我在应用程序中使用usb读卡器填写输入表单。我正试图隐藏它，并能够用我的卡徽章发送表格

我试着用

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

---

我不明白angular如何处理DOM中所有隐藏的元素？但看起来我可以访问它，但不能使用它。

有条件地隐藏字段怎么样

在您的ts中，类似这样的内容：

hideInput() {
    this.isInputShown = true;
}

hideInput() {
    this.isInputShown = false;
}

---

然后调用这些方法来隐藏/显示。

有条件地隐藏字段怎么样

在您的ts中，类似这样的内容：

hideInput() {
    this.isInputShown = true;
}

hideInput() {
    this.isInputShown = false;
}

---

然后调用这些方法来隐藏/显示。

首先，您应该决定是隐藏您的输入并使用纯js/html还是使用Angular功能来获取，因为您发布的代码行使用的是普通javascript。这样，您应该尝试使用属性

可见性：hidden

添加到输入css样式中

要使用Angular将其隐藏，您应该使用方括号表示法绑定隐藏属性，如下所示：

[hidden]=“true”

您应该通过初始化Angular Form并通过formControlName查找输入来获取代码中的元素，下面是一些文档，对如何实现这一点进行了明确的解释：

如果您只有一个输入，并且不想为其初始化整个表单，可以尝试添加ElementRef，代码如下：

import {ElementRef} from '@angular/core';
@ViewChild('myInput') inputElement:ElementRef;

ngAfterViewInit() {
      this.inputElement.nativeElement.focus();
}

<input #myInput [hidden]="true" [(ngModel)]="refresh">

从'@angular/core'导入{ElementRef}；
@ViewChild（'myInput'）inputElement:ElementRef；
ngAfterViewInit（）{
this.inputElement.nativeElement.focus（）；
}

首先，您应该决定是隐藏输入，然后使用纯js/html还是使用Angular功能获取输入，因为您发布的代码行使用的是普通javascript。这样，您应该尝试使用属性

可见性：hidden

添加到输入css样式中

要使用Angular将其隐藏，您应该使用方括号表示法绑定隐藏属性，如下所示：

[hidden]=“true”

您应该通过初始化Angular Form并通过formControlName查找输入来获取代码中的元素，下面是一些文档，对如何实现这一点进行了明确的解释：

如果您只有一个输入，并且不想为其初始化整个表单，可以尝试添加ElementRef，代码如下：

import {ElementRef} from '@angular/core';
@ViewChild('myInput') inputElement:ElementRef;

ngAfterViewInit() {
      this.inputElement.nativeElement.focus();
}

<input #myInput [hidden]="true" [(ngModel)]="refresh">

从'@angular/core'导入{ElementRef}；
@ViewChild（'myInput'）inputElement:ElementRef；
ngAfterViewInit（）{
this.inputElement.nativeElement.focus（）；
}

您甚至可以使用

class="cdk-visually-hidden"

您甚至可以使用

class="cdk-visually-hidden"

---

请向我们展示您试图使用读卡器goninit（）来填充表单的代码{document.getElementById（“cardNumber”）.focus（）；}这就是usb读卡器将自动写入rfid卡内容并按ENTER键的全部内容。请同时向我们显示您尝试使用读卡器GonInit（）填充表单的代码{document.getElementById（“cardNumber”）.focus（）；}这就是所有的usb读卡器将自动写入rfid卡的内容，然后按ENTER键。它将不起作用，因为我根本不想看到这个字段，但我希望他出现在DOM中。如果我们要求angular有条件地删除它，它将无法访问。好的，那么您需要使用

[hidden]

属性。这将使元素保持在DOM中。请检查我的更新答案。它将不起作用，因为我根本不想看到这个字段，但我希望他出现在DOM中。如果我们要求angular有条件地删除它，它将无法访问。好的，那么您需要使用

[hidden]

属性。这将使元素保持在DOM中。请检查我的最新答案。