Kann ich im Controller auf ein Formular zugreifen?

Ich verwende derzeit Folgendes.

$scope.$$childHead.customerForm[firstName], damit:

<form name="customerForm">
  <input type="text" name="firstName" 
         ng-model="data.customer.firstName" 
         tabindex="1"  
         ng-disabled="!data.editable" 
         validationcustomer />
</form>

Dies funktioniert jedoch nur in Chrome. Jetzt habe ich folgendes versucht:

$scope.editCustomerForm[firstName], damit:

<form name="customerForm" ng-model="editCustomerForm">
  <input type="text" name="firstName" 
         ng-model="data.customer.firstName" tabindex="1"  
         ng-disabled="!data.editable" 
         validationcustomer />
</form>

Welches funktioniert nicht. Beachten Sie, dass sich mein Formular in einem Foundation Tab befindet. Wie kann ich darauf zugreifen firstName?

EDIT : Es sieht so aus, als ob das formnicht zum hinzugefügt wirdscope wenn es sich in einem Foundation Tab befindet.

Hat jemand eine Lösung dafür?

Obwohl in anderen Kommentaren darauf hingewiesen, dachte ich, ich würde es ein wenig für diejenigen buchstabieren, die die "Controller As" -Syntax verwenden:

<div ng-controller="MyController as ctrl">

<form name="ctrl.myForm">
    ...inputs
    Dirty? {{ctrl.myForm.$dirty}}

    <button ng-click="ctrl.saveChanges()">Save</button>
</form>

</div>

Dann können Sie in Ihrem Code wie folgt auf den FormController zugreifen:

function MyController () {
    var vm = this;
    vm.saveChanges = saveChanges;

    function saveChanges() {

       if(vm.myForm.$valid) { 
            // Save to db or whatever.
            vm.myForm.$setPristine();
       }
}

Sie können das Formular an ein Objekt anhängen, das in einem übergeordneten Controller definiert ist. Dann können Sie Ihr Formular auch von einem untergeordneten Bereich aus erreichen.

Übergeordneter Controller

$scope.forms = {};

Einige Vorlagen in einem untergeordneten Bereich

<form name="forms.form1">
</form>

Das Problem ist, dass das Formular nicht in dem Moment definiert werden muss, in dem der Code in der Steuerung ausgeführt wird. Also muss man so etwas machen

$scope.$watch('forms.form1', function(form) {
  if(form) {
    // your code...
  }
});

Wenn Sie das Formular zu Validierungszwecken an den Controller übergeben möchten, können Sie es einfach als Argument an die Methode übergeben, die die Übermittlung verarbeitet. Verwenden Sie den Formularnamen. Für die ursprüngliche Frage wäre dies ungefähr so:

<button ng-click="submit(customerForm)">Save</button>

Etwas spät für eine Antwort, aber mit der folgenden Option. Es funktioniert bei mir, ist mir aber nicht sicher, ob es der richtige Weg ist oder nicht.

Aus meiner Sicht mache ich das:

<form name="formName">
    <div ng-init="setForm(formName);"></div>
</form>

Und in der Steuerung:

$scope.setForm = function (form) {
    $scope.myForm = form;
}

Nachdem ich dies getan habe, habe ich mein Formular in meiner Controller-Variablen, die ist $scope.myForm

Um auf das Formular in Ihrem Controller zugreifen zu können, müssen Sie es einem Dummy-Scope-Objekt hinzufügen.

Etwas wie $scope.dummy = {}

Für Ihre Situation würde dies ungefähr Folgendes bedeuten:

<form name="dummy.customerForm">

In Ihrem Controller können Sie auf das Formular zugreifen, indem Sie:

$scope.dummy.customerForm

und Sie werden in der Lage sein, Dinge wie zu tun

$scope.dummy.customerForm.$setPristine()

WIKI LINK

Ein ... haben '.' in Ihren Modellen wird sicherstellen, dass die prototypische Vererbung im Spiel ist. Verwenden Sie also <input type="text" ng-model="someObj.prop1">eher als<input type="text" ng-model="prop1">

Wenn Sie wirklich ein Grundelement verwenden möchten / müssen, gibt es zwei Problemumgehungen:

1.Verwenden Sie $ parent.parentScopeProperty im untergeordneten Bereich. Dadurch wird verhindert, dass der untergeordnete Bereich eine eigene Eigenschaft erstellt. 2. Definieren Sie eine Funktion für den übergeordneten Bereich und rufen Sie sie vom untergeordneten Bereich aus auf. Übergeben Sie den primitiven Wert an den übergeordneten Bereich (nicht immer möglich).

Diese Antwort ist etwas spät, aber ich bin auf eine Lösung gestoßen, die alles viel einfacher macht.

Sie können den Formularnamen tatsächlich direkt Ihrem Controller zuweisen, wenn Sie die ControllerAs-Syntax verwenden, und ihn dann aus Ihrer "this" -Variablen heraus referenzieren. So habe ich es in meinem Code gemacht:

Ich habe den Controller über einen UI-Router konfiguriert (aber Sie können es tun, wie Sie möchten, auch im HTML-Code direkt mit so etwas wie <div ng-controller="someController as myCtrl">). So könnte es in einer UI-Router-Konfiguration aussehen:

views: {
            "": {
                templateUrl: "someTemplate.html",
                controller: "someController",
                controllerAs: "myCtrl"
            }
       }

und dann setzen Sie im HTML einfach den Formularnamen als "controllerAs". "name" wie folgt:

<ng-form name="myCtrl.someForm">
    <!-- example form code here -->
    <input name="firstName" ng-model="myCtrl.user.firstName" required>
</ng-form>

Jetzt können Sie in Ihrem Controller ganz einfach Folgendes tun:

angular
.module("something")
.controller("someController",
    [
       "$scope",
        function ($scope) {
            var vm = this;
            if(vm.someForm.$valid){
              // do something
            }
    }]);

Ja, Sie können auf ein Formular im Controller zugreifen (wie in den Dokumenten angegeben ).

Außer wenn Ihr Formular nicht im Controller-Bereich definiert ist und stattdessen in einem untergeordneten Bereich definiert ist.

Grundsätzlich einige Winkel Richtlinien, wie zum Beispiel ng-if, ng-repeatoder ng-includewird ein Kind isoliert Bereich erstellen. Dies gilt auch für benutzerdefinierte Anweisungen mit einer scope: {}definierten Eigenschaft. Wahrscheinlich stehen Ihnen auch Ihre Fundamentkomponenten im Weg.

Ich hatte das gleiche Problem, als ich ein einfaches ng-ifum das <form>Tag herum einführte .

Weitere Informationen finden Sie hier:

• https://groups.google.com/forum/#!topic/angular/B2uB8-9_Xbk

• AngularJS - Verlust des Gültigkeitsbereichs bei Verwendung von ng-include

Hinweis: Ich schlage vor, dass Sie Ihre Frage neu schreiben. Die Antwort auf Ihre Frage lautet Ja, aber Ihr Problem ist etwas anders:

Kann ich vom Controller aus auf ein Formular in einem untergeordneten Bereich zugreifen?

Worauf die Antwort einfach lauten würde: Nein .

Fügen Sie ng-model="$ctrl.formName"Ihrem Formular ein Attribut hinzu, und im Controller können Sie auf das Formular als Objekt in Ihrem Controller zugreifenthis.formName

Auf jeden Fall können Sie nicht auf das Formular zugreifen, da. es wird nicht erstellt. Das DOM aus der HTML-Vorlage wird wie der Controller-Konstruktor etwas langsam geladen. Die Lösung besteht darin, zu beobachten, bis DOM geladen und der gesamte Bereich definiert ist!

im Controller:

$timeout(function(){
    console.log('customerForm:', $scope.customerForm);
    // everything else what you need
});