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
`readonly`	`boolean`	Deaktiviert die Bearbeitung des Feldes
`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
`placeholder`	`string`	Platzhalter im Hintergrund bei fokussiertem Textfeld
`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
`valueChange`	`string \| number \| Date \| null`	Empfohlen. Der fertig geparste Wert — bei `type="number"` bereits eine `number`
`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.

Welches Output nehmen?

value ist ein model(), deshalb gibt es (valueChange) gratis dazu — und das ist in Angular-Code fast immer die richtige Wahl:

<!-- empfohlen: typisierter Wert, kein DOM-Zugriff, keine Konvertierung -->
<mmm-ng-input type="number" [value]="cols()" (valueChange)="cols.set($event)" />

<!-- funktioniert, ist aber Umweg über das DOM -->
<mmm-ng-input type="number" [value]="cols()" (input)="cols.set(+$any($event.target).value)" />

(input) und (change) liefern ein CustomEvent. Der Wert steht dort in detail.value; target zeigt auf das native <input>, damit auch $event.target.value funktioniert.

$event.target.value ist immer ein String — bei type="number" also "7", nicht 7. Wer damit rechnet, muss selbst konvertieren. (valueChange) und detail.value liefern die Zahl direkt.

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

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
    [disabled]="true"
    label="Telefon"
    type="tel"
    supportingText="Bitte mit Vorwahl eingeben"
    placeholder="Hier Telefonnummer eingeben"
></mmm-ng-input>

<mmm-ng-input
    error="true"
    label="Input Field"
    supportingText="Bitte mit Vorwahl eingeben"
    placeholder="Placeholder"
></mmm-ng-input>

<mmm-ng-input
    [compact]="true"
    label="Input Field"
    supportingText="Bitte mit Vorwahl eingeben"
    placeholder="Placeholder"
></mmm-ng-input>

<mmm-ng-input
    [maskOptions]="currencyMask"
    [compact]="true"
    [inputmode]="decimal"
    label="Input Field mit Euromaske"
    placeholder="Hier Betrag eingeben"
></mmm-ng-input>

Telefon

Bitte mit Vorwahl eingeben

Input Field

Bitte mit Vorwahl eingeben