Als ich das erste Mal mit ControllerAs (wer möchte kann hier mehr über die ControllerAs-Schreibweise erfahren) und Formularen gearbeitet habe, bin ich auf ein kleines Problem gestoßen. Wie bekomme ich Zugriff auf das Formular in meinem Controller? Das Formular war benannt (das name-Attribut des form-Tags war gesetzt), aber das Formular war nicht im this-Objekt des Controllers. Ich war es gewohnt, mit $scope zu arbeiten, und da wusste ich, dass ich über den Formularnamen Zugriff auf den Formular-Controller bekommen kann, indem ich $scope.Formularname benutze. Also habe ich den $scope als Abhängigkeit definiert, um Zugriff auf das Formular zu bekommen. Das sah dann so aus:

Ausschnitt aus index.html

<div ng-controller="MainCtrl as ctrl">
  <form name="myForm">
    <input name="myInput" ng-model="ctrl.name"/>
  </form>
</div>

app.js

angular.module('testApp', [])
.controller('MainCtrl', function($scope) {
  var vm = this;
  $scope.myForm.$error; // Das $error-Objekt des Formulars

  // Name für ng-model
  vm.name = 'My Name';
});

Jetzt hatte ich zwar Zugriff auf das Formular, musste aber das $scope-Objekt injizieren. Diese Lösung hat funktioniert, war aber nur mäßig zufriedenstellend. Es musste ja sicherlich auch einen Weg geben, mit Formularen zu arbeiten ohne $scope. Nach ein bisschen Tüfteln habe ich die Lösung gefunden. Ich musste dem Formular sagen, dass es zu meinem Controller gehört, und das geht so:

Ausschnitt aus index.html

<div ng-controller="MainCtrl as ctrl">
  <form name="ctrl.myForm">
    <input name="myInput" ng-model="ctrl.name"/>
  </form>
</div>

app.js

angular.module('testApp', [])
.controller('MainCtrl', function() {
  var vm = this;
  vm.myForm.$error; // Das $error-Objekt des Formulars

  vm.name = 'My Name';
})

Die Lösung war denkbar einfach. Ich musste nur ctrl als Präfix für den Formularnamen nutzen, genauso, wie ich es auch beim ng-model getan habe für die name-Eigenschaft. Jetzt konnte ich mit meinem Formular arbeiten, ohne den $scope injizieren zu müssen und ohne die ControllerAs-Schreibweise aufgeben zu müssen.

Fragen oder Anregungen?

Twitter: @jsperts_de

Github: JSperts

Xing: JSperts

E-Mail: info@jsperts.de

Newsletter

Möchten Sie Zugang zu diesen Informationen haben?

  • Gutscheine und Angebote für Workshops
  • Informationen zu Workshops (neue Termine, neue Inhalte)
  • Benachrichtigungen über neue Blogartikel zu Themen wie Angular, ES6, React, usw.