Question

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

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

有没有办法以动态的形式隐藏输入内容，其中还包括提交中的值？

Answer 1

使用hidden="true"来解决这个问题

<input  hidden="true"  matInput class="form-control" formControlName="yourfieldname">

Answer 2

如前所述，type =“ hidden”不适用于matInput。如果打开浏览器控制台，您将看到“错误错误：matInput不支持输入类型“ hidden”。并且如果您尝试使用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

由于隐藏字段不可见，也不重要，因此您可以按以下方式在组件中定义控件形式

this.yourForm = this.formBuilder.group({
        
        hidden_fld:["your_value",Validators.nullValidator],
        other_field: ['', Validators.required],
      
        });

因此，您要设置hidden_fld的默认值，并且在提交时，该值还将与其他表单变量一起发送

Answer 4

在角度10中，可以将* ngIf与

一起使用

Answer 5

在这里，我为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

Answer 6

您可以简单地使用 hidden 指令。

<mat-form-field [hidden]="!(formX.value.otherControl == '1')">
    <input matInput type="number" placeholder="An Input" formControlName="aControl">
</mat-form-field>

在我的示例中，我使用了名为formX的形式的值（ formX.value.otherControl ），但在这种情况下，可以使用 true 。

<mat-form-field [hidden]="true">
    <input matInput type="number" placeholder="An Input" formControlName="aControl">
</mat-form-field>

Answer 7

如果你还没有找到答案。鉴于您想要做什么，这就是我成功的方法。因为我想隐藏某些输入，我只是没有将它们包含在 a 中，并且使用 action='' post='' 和 type='submit' 按钮成功提交了表单。示例：

<form action='/path' method='post'>
     <mat-form-field class="form-element">
        <label for="item">
          <input matInput placeholder="My Item"
                 [value]="paymentDetail._amount" name="item" id="item">
        </label>
      </mat-form-field>
     <input name="anotherItem" id="anotherItem" type="hidden"
             [value]="model._itemDescription" >
</form>

如何隐藏材料输入

7 个答案: