Input

Überblick

mmm-ng-input ist das generische Eingabefeld des Designsystems. Es unterstützt Standard-HTML-Typen, Form-Control-Anbindung, Fehlermeldungen, Maskierung und optional einen eingebetteten Number-Stepper.

Subkomponenten und Direktiven

• mmm-ng-input: Hauptkomponente
• [mmmStart]: Prefix-Inhalt
• [mmmEnd]: Suffix-Inhalt
• [mmmSupportingIcon]: unterstützendes Icon
• interner Einsatz von mmm-counter-stepper bei numerischen Feldern

Inputs

Input	Typ	Beschreibung
disabled	boolean	Deaktiviert das Feld
value	string | number | Date | null	Externer Wert
label	string	Feldlabel
type	`‘text'	'email'
error	boolean	Fehlerstatus
compact	boolean	Kompakter Modus
errorMessage	string	Fehlermeldung
supportingText	string	Hilfetext
maskOptions	FactoryArg	IMask-Konfiguration
clearable	boolean	Zeigt Clear-Aktion an
min	number	Minimale Zahl bei type="number"
max	number	Maximale Zahl bei type="number"
step	number	Schrittweite bei Zahlen
showNumberStepper	boolean	Zeigt den Number-Stepper

Outputs

Output	Typ	Beschreibung
input	EventEmitter<CustomEvent<{ value: string | number }>>	Native-angelehntes Input-Event
change	EventEmitter<CustomEvent<{ value: string | number }>>	Native-angelehntes Change-Event

Die Komponente implementiert außerdem ControlValueAccessor.

SCSS-Variablen

Wichtige Variablen:

• --mmm-input-border-radius
• --mmm-input-height
• --mmm-input-height-compact
• --mmm-input-padding-inline
• --mmm-input-content-gap
• --mmm-input-label-offset-inline
• --mmm-input-native-padding
• --mmm-input-clear-padding
• --mmm-input-clear-border-radius
• --mmm-input-messages-gap
• --mmm-input-messages-padding

Hinweise

• Maskierung wird über IMask eingebunden.
• Im number-Modus können Pfeiltasten für Inkrement und Dekrement verwendet werden.
• Prefix, Suffix und Supporting Icon werden als Content projiziert.

Beispiel

<mmm-ng-input
  label="Telefon"
  type="tel"
  supportingText="Bitte mit Vorwahl eingeben"
></mmm-ng-input>

Name