web-dev-qa-db-ger.com

Eingabe von Formaten für Formulare in Angular/Material

Ich habe ein Mat-Form-Feld mit Eingaben, denen ich einen benutzerdefinierten Stil hinzufügen möchte. Ich kann jedoch keine Dokumentation auf der offiziellen Angular Material-Website finden.

Mein letztes Ziel ist es:

  • Ändern Sie die Unterstrichfarbe, nachdem das Eingabefeld ausgewählt wurde
  • Entfernen Sie das Floating-Label (wenn möglich - ich weiß, dass dies eine Funktion war, die aber jetzt veraltet ist).

Ich bin mit Angular noch nicht der Kenner, aber wenn sich in JS etwas ändern muss, kann ich immer mein Bestes geben.

Ich brauche nur eine kleine Anleitung.

Aktueller Code:

<form class="search-form">
  <mat-form-field class="example-full-width">
    <input class="toolbar-search" type="text" matInput>
    <mat-placeholder>Search</mat-placeholder>
    <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

Aktuelles CSS:

// Change text colour when inputting text
.toolbar-search, mat-placeholder {
  color: white;
}

// Changes the underline and placeholder colour before input is selected
/deep/ .mat-input-underline {
    background-color: white;
}
javascripthtmlcssangularangular-material2
7
physicsboy

Nach meinem Verständnis scheinen beide Funktionen in MatFormField zu sein.

  1. floatPlaceholder ist veraltet, da es jetzt [floatLabel] für FloatLabelType ('never', 'always', 'auto') ist und mit der Eingabe angewendet wird 
  2. Sie können die Farbe der Unterstreichung mit der Eingabe [color] ändern, Sie können jedoch nur Farben aus Ihrem Design auswählen ('primary', 'accent', 'warn'). Weitere Informationen zum Einrichten des Themas finden Sie unter deren Website hier , 


<form class="search-form">
  <mat-form-field class="example-full-width"
                  floatLabel="never" color="primary">
    <input class="toolbar-search" type="text" matInput placeholder="search">
    <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>
5
Iancovici

Sie können den von Ihnen verwendeten CSS-Selector verwenden:

/deep/ .mat-input-underline {
   background-color: white;
}

Der/deep/Kombinator ist in Angular für die Abwertung vorgesehen. Leider ist die .mat-input-underline von Angular Material hoch spezifiziert, was das Überschreiben ohne/deep/sehr schwierig macht.

Die beste Methode, die ich gefunden habe, ist die Verwendung einer ID, die eine höhere Spezifität im Vergleich zu den Standardformaten für Winkelmaterial ermöglicht. 

 <form id="search-form" [formGroup]="form" (ngSubmit)="submit()">
    <mat-form-field>
      <mat-placeholder class="placeholder">Search</mat-placeholder>
      <input type="text" class="toolbar-search" matInput formControlName="search">
      <mat-icon matSuffix>search</mat-icon>
    </mat-form-field>

Dann kann Ihre Suchformular-ID verwendet werden, um die Eingabe als Ziel festzulegen. Sie können die Matte-Form-Feld-Unterstreichung in der Komponente "Komponente.scss" nicht anvisieren, ohne die Ansichtskapselung zu unterbrechen. Dies ist auf globaler Ebene einfacher, indem Sie dies zu Ihrer global.scss hinzufügen

global.scss: 

#search-form {
  .mat-form-field-underline {
    background-color: $accent;
  }
  .mat-form-field-ripple {
    background-color: $accent;
  }
  .placeholder {
    display: none;
  }
}

Ich hoffe, dass das Angular Material-Team in Zukunft seine Spezifität zurückzieht, da es derzeit keine einfache Möglichkeit gibt, die Standardeinstellungen zu überschreiben. 

3
drinck

Um die Stile der Materialeingaben mit scss zu ändern:

Standard:

::ng-deep .mat-form-field {
    .mat-input-element {
        color: slategray;
    }
    .mat-form-field-label {
        color: slategray;
    }
    .mat-form-field-underline {
        background-color: slategray;
    }
    .mat-form-field-ripple {
        background-color: slategray;
    }
    .mat-form-field-required-marker {
        color: slategray;
    }
}

Focused: (wenn ausgewählt)

::ng-deep .mat-form-field.mat-focused {
    .mat-form-field-label {
        color: #ff884d;
    }
    .mat-form-field-ripple {
        background-color: #ff884d;
    }
    .mat-form-field-required-marker {
        color: #ff884d;
    }
    .mat-input-element {
        color: #ff884d;
    }
}

Ungültig:

::ng-deep .mat-form-field.mat-form-field-invalid {
    .mat-input-element {
        color: #ff33cc;
    }
    .mat-form-field-label {
        color: #ff33cc;
        .mat-form-field-required-marker {
            color: #ff33cc;
        }
    }
    .mat-form-field-ripple {
        background-color: #ff33cc;
    }
}

DEMO

sie können auch ViewEncapsulation.None verwenden, um ::ng-deep zu vermeiden, dh veraltet

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

@Component({
    ...
    encapsulation: ViewEncapsulation.None
})
2
A. Morel