5
votes

Comment masquer l'entrée de matériau

Normalement, si je veux qu'un champ de formulaire soit inclus dans la soumission mais non visible, je fais un <input type="hidden" />

Cependant, matInput ne permet pas un type de hidden . Je pourrais utiliser un display: none; mais cela exclut généralement la valeur de la soumission.

Existe-t-il un moyen de masquer l'entrée sous une forme dynamique matérielle qui inclut également la valeur lors de la soumission?

angular angular-material

1 commentaires

Voulez-vous être masqué ou ne pas être cliqué?

5 Réponses :

-1
votes

Ici, j'ai ajouté un code pour matInput vous pouvez voir qu'au premier mat-form-field est input hidden et fonctionne. Si vous voulez afficher ne pas être cliqué, ajoutez simplement disabled à la fin de l' input et cela fonctionnera.

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

0 commentaires

4
votes

Comme mentionné, type = "hidden" ne fonctionne pas avec matInput. Si vous ouvrez la console de votre navigateur, vous verrez "ERREUR Erreur: le type d'entrée" masqué "n'est pas pris en charge par matInput." et si vous avez essayé de soumettre le formulaire avec type = "hidden", le formulaire sera corrompu, affichant uniquement une partie des valeurs du formulaire. Un moyen simple de contourner ce problème consiste à utiliser une classe CSS sur la balise mat-form-field:

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

Extrait CSS:

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

0 commentaires

2
votes

Vous pouvez simplement utiliser une directive cachée .

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

J'ai utilisé une valeur dans ma forme nommée formX ( formX.value.otherControl ) dans mon exemple mais vous pouvez utiliser true dans votre cas.

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

3 commentaires

Ne semble pas fonctionner pour ng10. Quelqu'un connaît-il une autre approche que l'utilisation de .css?

Cela ne fonctionne pas non plus dans Angular 10 pour moi. Cela fonctionne class = "cdk-visually-hidden".

Ne fonctionne pas pour Angular 10.

1
votes

comme les champs masqués ne sont pas visibles, cela n'a pas de sens, vous pouvez également définir le contrôle sous forme dans le composant comme suit

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

vous définissez donc la valeur par défaut de hidden_fld, et lors de la soumission, cette valeur sera également envoyée avec d'autres variables de formulaire

0 commentaires

1
votes

Dans angular 10, vous pouvez utiliser * ngIf avec <mat-form-field>

0 commentaires