AngularJs – Custom Form Control

Downloads:

Component erstellen

Zu Demozwecken wird eine einfache Input Spinner Component als Custom Form Control realisiert.
Diese soll einen Startwert erhalten, welcher duch Buttons hoch- und runtergezählt werden kann.

ngModel als Input festlegen

Durch die Zuweisen von ngModel erhält man innerhalb des Custom Form Control den vollen Zugriff auf das AngularJs ngModel.
Damit es klar ist, dass hier mit dem Model mehr als nur Two Way Binding stattfindet, wird es in ngModelCtrl umbenannt.
Hierfür wird das require der Component-Options entsprechend gesetzt:

...
require: { ngModelCtrl: 'ngModel' },
...

ngModel zuweisen

Die Spinner Component soll intern ein Input vom Type number nutzen.
Dessen ng-model wird auf den Wert von ngModelCtrl.$viewValue gesetzt.

<input 
    type="number" 
    ng-model="$ctrl.ngModelCtrl.$viewValue" 
/>

GET und SET Value definieren

Im weitern Verlauf wird mittels GET und SET value auf $viewValue zugegriffen und zugewiesen.

...
  get value() {
    return +this.ngModelCtrl.$viewValue;
  }

  set value(value) {
    this.ngModelCtrl.$setViewValue(value);
  }
...

Buttons definieren

Nun werden Buttons definiert, die für das Hoch- und Runterzählen gelten.

<button ng-click="$ctrl.decrement()">
    decrement
</button>

<input 
    type="number" 
    ng-model="$ctrl.ngModelCtrl.$viewValue" 
    />

<button ng-click="$ctrl.increment()">
    increment
</button>

Funktionen der Buttons implementieren

Zu Demozwecken wird der Wert um 1 hoch- oder entsprechend runtergezählt.

increment() {
    this.value = this.value + 1;
}

decrement() {
    this.value = this.value - 1;
}

Custom Form Control in Form nutzen

Durch die Zuweisung von ngModel kann das Custom Form Control auch einfach in einem AngularJs Form (hier: $ctrl.f) genutzt werden.
Hierfür wird das Name-Attribute gesetzt.
Somit lässt sich das Custom Form Control mittels $ctrl.f.submit() validieren und dessen Wert im Formular abfragen/bearbeiten.

<form name="$ctrl.f">
    <spinner 
            name="spinner" 
            ng-model="$ctrl.spinnerControlValue"
    ></spinner>
    <button ng-click="$ctrl.f.submit()">submit form</button>
</form>

<h3>Form as JSON</h3>
<pre>{{ $ctrl.f | json }}</pre>

Weiteres

Das Custom Form Control kann nun durch weitere Component Bindings erweitert werden.
z.B.:

• min – der Mindestwert des Controls
• max – der Maximalwert des Controls
• editable – Ob das Input oder nur der Wert angezeigt werden soll
• interval – der Wert, welcher beim Hoch- und Runterzählen zugewiesen werden soll