如何使用 Angular 隐藏输入

Question

我在我的应用程序中使用 USB 卡 reader 来填写输入表单。我试图隐藏它并能够用我的卡标记来发送表格。

我尝试使用

<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

有条件地隐藏字段怎么样？

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

在你的 ts 中是这样的：

hideInput() {
    this.isInputShown = true;
}

hideInput() {
    this.isInputShown = false;
}

然后将这些方法调用到 hide/show。

Answer 2

首先，您应该决定是否要隐藏您的输入并使用纯 js/html 或使用 Angular 功能获取它，因为您发布的代码行是使用原版 javascript。按照这种方式，您应该尝试使用属性 visibility: hidden.

添加到输入 css 样式

要使用 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">

Answer 3

你甚至可以使用

class="cdk-visually-hidden"

Documentation

如何使用 Angular 隐藏输入

How to hide input with Angular

hidden-field

angular