web-dev-qa-db-fra.com

Angular Bordure matérielle mdInput autour du contrôle

Je voudrais appeler mon contrôle mdInput pour qu'il soit entouré d'une boîte noire:

    <md-form-field>
      <input type="text" mdInput [(ngModel)]="row.price" placeholder="Price">
    </md-form-field>

J'ai essayé de mettre un div autour du contrôle d'entrée avec style = "border: 1px solid black;" Cependant, il crée une bordure uniquement autour du contrôle d'entrée lui-même. J'ai essayé d'ajouter border à md-form-field, mais cela ne met bord à droite et à gauche (mais à en juger par la hauteur, si je pouvais obtenir une bordure en haut et en bas, il semblerait que je pourrais le réaliser) pour y parvenir? 

angularangular-material2
4
AlexanderM

La méthode recommandée pour remplacer les styles Material2 par défaut consiste à utiliser ViewEncapsulation . deep, ::ng-deep et >>> sont amortis et éventuellement abandonnés ( documentation officielle ).

Le combinateur descendant perçant les ombres est obsolète et le support est être retiré des principaux navigateurs et outils. En tant que tel, nous prévoyons de laisser tomber support dans Angular (pour les 3 de / deep/, >>> et :: ng-deep).

Pour définir une bordure pour l'entrée, incluez les éléments suivants dans votre component.ts:

import { ViewEncapsulation } from '@angular/core';

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

... alors ajoutez simplement ce qui suit dans vos styles de composant: 

/* To display a border for the input */
.mat-input-flex.mat-form-field-flex{
   border: 1px solid black;
}

/* To remove the default underline */
.mat-input-underline.mat-form-field-underline {
   background: transparent;
}

/* To remove the underline ripple */
.mat-input-ripple.mat-form-field-ripple{
   background-color: transparent; 
}

Voici une démo de travail .

4
Faisal

https://material.angular.io/components/form-field/overview#form-field-appearance-variants

La nouvelle version du champ de formulaire angulaire prend en charge différentes apparences pour les champs de formulaire tels que 

  1. legacy (défaut matériel)
  2. la norme
  3. remplir 
  4. contour

Le contour est ce que vous recherchez

regardez la démo ici 

https://stackblitz.com/edit/angular-61fqsd?file=src/app/app.component.html

9
Shishya

Cela a fonctionné pour moi

.mat-form-field-underline .mat-form-field-ripple {
  background: orange !important;
}
1
Siraj Kakeh

Essaye ça: 

::ng-deep .mat-input-wrapper{
 background-color:black; 
}

ou (selon ce dont vous avez besoin)

::ng-deep .mat-input-wrapper{
   border: 2px solid black;
}

DEMO

encapsulation: ViewEncapsulation.Aucun inconvénient, cela affectera toutes les classes, que vous le souhaitiez ou non. Ce n'est toujours pas obsolète et je pense qu'il sera simplement remplacé par autre chose. 

0
Vega