Как скрыть материал ввода

Question

Обычно, если я хочу, чтобы поле формы было включено в отправку, но не отображалось, я делаю <input type="hidden" />

Однако, matInput не допускает тип hidden.Я мог бы использовать display: none;, но это обычно исключает значение из представления.

Есть ли способ скрыть ввод в динамической форме материала, которая также включает значение в представлении?

Answer 1

Как уже упоминалось, type = "hidden" не работает с matInput.Если вы откроете консоль браузера, вы увидите «Ошибка ОШИБКИ: тип ввода« скрытый »не поддерживается matInput».и если вы попытались отправить форму с type = "hidden", то форма будет повреждена, отображая только часть значений формы.Простой способ обойти эту проблему - использовать класс CSS для тега mat-form-field:

<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 2

Вы можете просто использовать директиву 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 3

Здесь я добавил код для 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