如何隐藏材料输入

Question

通常，如果我希望表单字段包含在提交中但不可见，我会执行 <input type="hidden" />

但是，matInput不允许使用hidden. 我可以使用 adisplay: none;但通常会从提交中排除该值。

有没有办法在材料动态表单中隐藏输入，该表单还包含提交中的值？

Answer 1

我确实针对 Angular v11 进行了测试，但hidden仍然不支持mat-form-field，因此不要创建 css 类或使用type=hiddenor*ngIf指令（有时您不想刷新组件的生命周期）。

我刚刚改变了[hidden]="variable"-> [class.cdk-visually-hidden]="variable"。

感谢@EdWood

Answer 2

如前所述， type="hidden" 不适用于 matInput。如果您打开浏览器控制台，您会看到“错误错误：matInput 不支持输入类型“隐藏”。” 如果您尝试使用 type="hidden" 提交表单，则该表单将被破坏，仅显示部分表单值。解决此问题的一种简单方法是在 mat-form-field 标签上使用 CSS 类：

<mat-form-field class="invisible example-full-width">
   <input matInput placeholder="Favorite food" value="Sushi" ngModel name="fish">
</mat-form-field>

CSS 片段：

.invisible{
    display: block;
    visibility: hidden;
    height: 0;
    width: 0;
}

Answer 3

在 Angular 10 中，您可以将 *ngIf 与 <mat-form-field> 一起使用

Answer 4

在这里我添加了一个代码，matInput您可以看到它首先mat-form-field是input hidden并且有效的。如果你想显示不被点击，只需disabled在末尾添加input即可。

HTML

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi" type="hidden">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

https://stackblitz.com/edit/angular-g9jxjd-huz6me?file=app/input-overview-example.html