angular - Hvordan skjule material input

Vanligvis, hvis jeg vil at et skjema felt skal være inkludert i innsendingen, men ikke synlig, bruker jeg en <input type="hidden" />

Men matInput tillater ikke en type hidden. Jeg kunne bruke display: none;, men det utelukker vanligvis verdien fra innsending.

Finnes det en måte å skjule inputen i et materiell dynamisk skjema som også inkluderer verdien i innsendingen?

Svar #1

Jeg testet det for Angular v11 hvor hidden fortsatt ikke støttes for mat-form-field, så i stedet for å lage en CSS-klasse eller bruke type=hidden eller *ngIf-direktivet (noen ganger ønsker man ikke å oppdatere komponentens livssyklus).

Jeg endret nettopp [hidden]="variable" -> [class.cdk-visually-hidden]="variable".

Kreditt går til @EdWood

Svar #2

Som nevnt, fungerer ikke type="hidden" med matInput. Hvis du åpner nettleserkonsollen, vil du se "ERROR Error: Input type "hidden" er ikke støttet av matInput." og hvis du prøvde å sende inn skjemaet med type="hidden", vil skjemaet bli ødelagt, og kun en del av skjemaverdiene vil vises. En enkel måte å omgå dette problemet på er ved å bruke en CSS-klasse på mat-form-field-taggen:

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

CSS-utdrag:

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

Relaterte artikler