Czy mogę uzyskać dostęp do formularza w kontrolerze?

Obecnie używam następujących.

$scope.$$childHead.customerForm[firstName], więc:

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

Ale to działa tylko w Chrome. Teraz spróbowałem następujących rzeczy:

$scope.editCustomerForm[firstName], więc:

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

Co nie działa. Zauważ, że mój formularz znajduje się wewnątrz zakładki Foundation. Jak mogę uzyskać dostęp firstName?

EDYCJA : Wygląda na formto, że nie jest dodawany do karty, scopegdy znajduje się na karcie Podstawy.

Czy ktoś ma na to rozwiązanie?

Chociaż wspomniałem w innych komentarzach, pomyślałem, że przeliteruję to trochę dla tych, którzy używają składni „Kontroler jako”:

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

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

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

</div>

Następnie możesz uzyskać dostęp do FormController w swoim kodzie, na przykład:

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

    function saveChanges() {

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

Możesz dołączyć formularz do obiektu, który jest zdefiniowany w kontrolerze nadrzędnym. Wtedy możesz dotrzeć do swojego formularza nawet z zakresu podrzędnego.

Kontroler rodzica

$scope.forms = {};

Jakiś szablon w zakresie podrzędnym

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

Problem w tym, że formularz nie musi być definiowany w momencie wykonywania kodu w kontrolerze. Więc musisz zrobić coś takiego

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

Jeśli chcesz przekazać formularz do kontrolera w celu walidacji, możesz po prostu przekazać go jako argument do metody obsługującej przesłanie. Użyj nazwy formularza, więc dla oryginalnego pytania będzie to coś takiego:

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

Trochę za późno na odpowiedź, ale przyszedł z następującą opcją. To działa dla mnie, ale nie jestem pewien, czy jest to właściwy sposób, czy nie.

Moim zdaniem robię to:

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

A w kontrolerze:

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

Teraz po zrobieniu tego mam swój formularz w mojej zmiennej kontrolera, która jest $scope.myForm

Aby mieć dostęp do formularza w kontrolerze, musisz dodać go do obiektu fikcyjnego zakresu.

Coś jak $scope.dummy = {}

W Twojej sytuacji oznaczałoby to coś takiego:

<form name="dummy.customerForm">

W swoim kontrolerze będziesz mieć dostęp do formularza poprzez:

$scope.dummy.customerForm

i będziesz mógł robić takie rzeczy

$scope.dummy.customerForm.$setPristine()

WIKI LINK

Mający '.' w modelach zapewni, że w grę wchodzi dziedziczenie prototypowe. Więc użyj <input type="text" ng-model="someObj.prop1">zamiast<input type="text" ng-model="prop1">

Jeśli naprawdę chcesz / potrzebujesz użyć prymitywu, istnieją dwa obejścia:

1. Użyj $ parent.parentScopeProperty w zakresie podrzędnym. Uniemożliwi to zakresowi podrzędnemu utworzenie własnej właściwości. 2. Zdefiniuj funkcję w zakresie nadrzędnym i wywołaj ją od dziecka, przekazując wartość pierwotną do rodzica (nie zawsze jest to możliwe)

Ta odpowiedź jest trochę spóźniona, ale natknąłem się na rozwiązanie, które znacznie ułatwia wszystko.

W rzeczywistości możesz przypisać nazwę formularza bezpośrednio do swojego kontrolera, jeśli używasz składni controllerAs, a następnie odwołać się do niej ze swojej zmiennej „this”. Oto jak zrobiłem to w moim kodzie:

I skonfigurowany kontroler poprzez UI-routera (ale można to zrobić tylko chcesz, nawet w HTML bezpośrednio z czymś takim <div ng-controller="someController as myCtrl">) To co to może wyglądać w konfiguracji routera-ui:

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

a następnie w kodzie HTML po prostu ustaw nazwę formularza jako „kontrolerAs”. „nazwa” w następujący sposób:

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

teraz w kontrolerze możesz to zrobić w bardzo prosty sposób:

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

Tak, możesz uzyskać dostęp do formularza w kontrolerze (zgodnie z dokumentacją ).

Z wyjątkiem sytuacji, gdy formularz nie jest zdefiniowany w zakresie kontrolera i zamiast tego jest zdefiniowany w zakresie podrzędnym.

Zasadniczo niektóre dyrektywy kątowe, takie jak ng-if, ng-repeatlub ng-include, utworzą izolowany zakres potomny. Podobnie będzie z wszelkimi dyrektywami niestandardowymi ze scope: {}zdefiniowaną właściwością. Prawdopodobnie na twojej drodze są również komponenty fundamentu.

Miałem ten sam problem podczas wprowadzania prostego ng-ifdookoła <form>tagu.

Zobacz te, aby uzyskać więcej informacji:

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

• AngularJS - traci zakres podczas korzystania z ng-include

Uwaga: sugeruję ponowne napisanie pytania. Odpowiedź na Twoje pytanie brzmi tak, ale Twój problem jest nieco inny:

Czy mogę uzyskać dostęp do formularza w zakresie podrzędnym z poziomu kontrolera?

Na co odpowiedź brzmiałaby po prostu: nie .

dodaj ng-model="$ctrl.formName"atrybut do swojego formularza, a następnie w kontrolerze możesz uzyskać dostęp do formularza jako obiektu wewnątrz kontrolera przezthis.formName

Zdecydowanie nie możesz uzyskać dostępu do formularza w zakresie bec. nie jest stworzona. DOM z szablonu html jest ładowany trochę powoli, jak konstruktor kontrolera. rozwiązaniem jest obserwowanie, aż DOM zostanie załadowany i cały zakres zdefiniowany!

w kontrolerze:

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