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

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

Как уже упоминалось, type="hidden" не работает с matInput. Если вы откроете консоль браузера, вы увидите сообщение «ОШИБКА: тип ввода «скрытый» не поддерживается matInput». и если вы попытаетесь отправить форму с типом = "скрытый", то форма будет повреждена, отображая только часть значений формы. Простой способ обойти эту проблему — использовать класс 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;
}

Вы можете просто использовать директиву скрытый.

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

Я использовал значение в моей форме с именем formX (formX.value.otherControl) в моем примере, но вы можете использовать истинный в своем случае.

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

поскольку скрытые поля не видны, они не материальны, в качестве альтернативы вы можете определить элемент управления в форме в компоненте следующим образом.

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

поэтому вы устанавливаете значение по умолчанию hidden_fld, и при отправке это значение также будет отправлено вместе с другими переменными формы.

В angular 10 вы можете использовать *ngIf с <mat-form-field>

Используйте скрытый = "истина" для решения этой проблемы

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

если вы не нашли ответ. Вот как я добился успеха, учитывая именно то, что вы хотели сделать. Поскольку я хотел скрыть определенные входные данные, я просто не включил их в 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>

Я протестировал его для Angular v11, где hidden все еще не поддерживается для mat-form-field, поэтому вместо создания класса css или использования type=hidden или если директива *ngIf невозможна, если вы не хотите обновлять жизненный цикл компонента.

Я только что изменил [hidden] = "variable" -> [class.cdk-visually-hidden] = "variable".

Кредит принадлежит @EdWood