GEDOPLAN
Webprogrammierung

Angular 5 Konverter

Webprogrammierung

Ein sehr häufig vorkommendes Szenario bei der Arbeit mit Fomularen ist die Umwandlung von Werten, also die Konvertierung zwischen Formular- und Daten-Repräsentation. In Angular ist dies mit einer Direktive möglich die das Interface ControlValueAccessor implementiert.

Als Beispiel dient ein sehr simples Beispiel. In unserem Datenmodel werden Namen als separates Objekt mit den Attributen “firstname” und “lastname” abgelegt. Innerhalb unsere Formulares sollen diese Werte jedoch gemeinsam (mit Leerzeichen getrennt) eingegeben werden:

2018-06-12 13_49_09-AngularParserFormatter

Der Schlüsselpunkt ist das Interface ControlValueAccessor mit dessen Hilfe wir unsere eigene Zugriffsmethode auf Eingabefelder realisieren können (in diesem Beispiel verwenden wir es als Konverter, dieses Interface würde aber z.B. auch bei der Erstellung einer völlig eigenen Eingabekomponente verwendet werden).

@Directive({
  selector: '[nameConverter]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => NameConverterDirective),
      multi: true
    }
  ]
})
export class NameConverterDirective implements ControlValueAccessor {...}

Hier deklarieren wir eine entsprechende Directive, die wir an die Liste der Angular zur Verfügung stehenden Value-Accessoren anhängen.

Zur Implememtierung müssen wir nun noch die entsprechenden Methoden implementieren, die im Kern diese beiden sind:

  • writeValue(value: any), vom Model in die View
  • HostListener, um auf Änderungen in der View zu reagieren
  writeValue(value: any) {
    let val = '';
    if (value && value.firstname && value.lastname) {
      const name: Name = value;
      val = name.firstname + ' ' + name.lastname;
    }
    this._renderer.setProperty(this._elementRef.nativeElement, 'value', val);
  }

  @HostListener('input', ['$event'])
  onInput(event: any) {
    const namesp = event.target.value.split(' ', 2);
    const targetValue = new Name(namesp[0], namesp.length == 1 ? '' : namesp[1]);
    this.onChangeMethod(targetValue);
  }

Live. In Farbe. Demo auf Github

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Bitte füllen Sie dieses Feld aus.
Bitte füllen Sie dieses Feld aus.
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren.

Autor

Diesen Artikel teilen

LinkedIn
Xing

Gibt es noch Fragen?

Fragen beantworten wir sehr gerne! Schreibe uns einfach per Kontaktformular.

Kurse

weitere Blogbeiträge

IT-Training - GEDOPLAN
DevOps

Docker – “Build, Ship, and Run”

Problemstellung Ein großes Problem stellen beim Testen und Ausliefern von Software die leider häufig unterschiedlich konfigurierten Ablaufumgebungen dar. Die Entwicklerrechner,…
IT-Training - GEDOPLAN
Application Server

Wildfly mit http/2

Unter der “vielsagenden” Spezifikation rfc7540 wurde mitte letzten Jahres die Version 2 des http-Protokolls verabschiedet. Basierend auf Googles eigener Entwicklung…

Work Life Balance. Jobs bei Gedoplan

We are looking for you!

Lust bei GEDOPLAN mitzuarbeiten? Wir suchen immer Verstärkung – egal ob Entwickler, Dozent, Trainerberater oder für unser IT-Marketing! Schau doch einfach mal auf unsere Jobseiten! Wir freuen uns auf Dich!

Work Life Balance. Jobs bei Gedoplan

We are looking for you!

Lust bei GEDOPLAN mitzuarbeiten? Wir suchen immer Verstärkung – egal ob Entwickler, Dozent, Trainerberater oder für unser IT-Marketing! Schau doch einfach mal auf unsere Jobseiten! Wir freuen uns auf Dich!