Bisakah saya mengakses formulir di controller?

Saat ini saya menggunakan yang berikut ini.

$scope.$$childHead.customerForm[firstName], yang seperti itu:

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

Tetapi ini hanya berfungsi di Chrome. Sekarang saya mencoba yang berikut:

$scope.editCustomerForm[firstName], yang seperti itu:

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

Yang tidak berhasil. Perhatikan formulir saya ada di dalam Tab Yayasan. Bagaimana saya bisa mengakses firstName?

EDIT : Sepertinya formtidak ditambahkan ke scopesaat itu di dalam Tab Yayasan.

Adakah yang punya solusi untuk ini?

Meskipun disinggung dalam komentar lain, saya pikir saya akan sedikit menguraikannya untuk mereka yang menggunakan sintaks "Controller As":

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

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

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

</div>

Kemudian Anda dapat mengakses FormController dalam kode Anda seperti:

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

    function saveChanges() {

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

Anda bisa melampirkan formulir ke beberapa objek yang didefinisikan dalam pengontrol induk. Kemudian Anda dapat mencapai formulir Anda bahkan dari lingkup anak.

Pengontrol induk

$scope.forms = {};

Beberapa templat dalam lingkup anak

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

Masalahnya adalah bahwa formulir tidak harus ditentukan pada saat ketika kode di controller dijalankan. Jadi, Anda harus melakukan sesuatu seperti ini

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

Jika Anda ingin meneruskan formulir ke controller untuk tujuan validasi, Anda bisa meneruskannya sebagai argumen ke metode yang menangani pengiriman. Gunakan nama formulir, jadi untuk pertanyaan awal itu akan seperti:

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

Agak terlambat untuk jawaban tetapi datang dengan opsi berikut. Ini bekerja untuk saya tetapi tidak yakin apakah itu cara yang benar atau tidak.

Dalam pandangan saya, saya melakukan ini:

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

Dan di controller:

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

Sekarang setelah melakukan ini, saya sudah mendapatkan formulir saya di variabel controller saya yang $scope.myForm

Untuk dapat mengakses formulir di controller Anda, Anda harus menambahkannya ke objek lingkup dummy.

Sesuatu seperti $scope.dummy = {}

Untuk situasi Anda, ini berarti:

<form name="dummy.customerForm">

Di controller Anda, Anda akan dapat mengakses formulir dengan:

$scope.dummy.customerForm

dan Anda akan dapat melakukan hal-hal seperti

$scope.dummy.customerForm.$setPristine()

Tautan WIKI

Memiliki sebuah '.' dalam model Anda akan memastikan bahwa warisan prototypal sedang dimainkan. Jadi, gunakan <input type="text" ng-model="someObj.prop1">daripada<input type="text" ng-model="prop1">

Jika Anda benar-benar ingin / perlu menggunakan primitif, ada dua solusi:

1.Gunakan $ parent.parentScopeProperty dalam lingkup anak. Ini akan mencegah ruang lingkup anak dari membuat properti sendiri. 2. Tetapkan fungsi pada lingkup induk, dan panggil dari anak, berikan nilai primitif ke induknya (tidak selalu memungkinkan)

Jawaban ini agak terlambat, tetapi saya menemukan solusi yang membuat semuanya BANYAK lebih mudah.

Anda benar-benar dapat menetapkan nama formulir langsung ke controller Anda jika Anda menggunakan sintaks controllerAs dan kemudian referensi dari variabel "ini" Anda. Inilah cara saya melakukannya dalam kode saya:

Saya mengkonfigurasi controller melalui ui-router (tetapi Anda dapat melakukannya sesuka Anda, bahkan dalam HTML langsung dengan sesuatu seperti <div ng-controller="someController as myCtrl">) Ini adalah apa yang mungkin terlihat seperti dalam konfigurasi ui-router:

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

dan kemudian di HTML, Anda cukup menetapkan nama formulir sebagai "controllerAs". "name" seperti:

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

sekarang di dalam controller Anda, Anda bisa melakukan ini:

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

Ya, Anda dapat mengakses formulir di controller (seperti yang dinyatakan dalam dokumen ).

Kecuali ketika formulir Anda tidak didefinisikan dalam lingkup pengontrol dan didefinisikan dalam lingkup anak sebagai gantinya.

Pada dasarnya, beberapa arahan sudut, seperti ng-if, ng-repeatatau ng-include, akan menciptakan ruang lingkup anak yang terisolasi. Begitu juga arahan khusus dengan scope: {}properti yang ditentukan. Mungkin, komponen fondasi Anda juga menghalangi Anda.

Saya memiliki masalah yang sama ketika memperkenalkan tag sederhana di ng-ifsekitar <form>.

Lihat ini untuk info lebih lanjut:

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

• AngularJS - kehilangan cakupan saat menggunakan ng-include

Catatan: Saya sarankan Anda menulis ulang pertanyaan Anda. Jawaban untuk pertanyaan Anda adalah ya tetapi masalah Anda sedikit berbeda:

Bisakah saya mengakses formulir dalam lingkup anak dari controller?

Jawabannya sederhana: tidak .

tambahkan ng-model="$ctrl.formName"atribut ke formulir Anda, dan kemudian di controller Anda bisa mengakses form sebagai objek di dalam controller Anda denganthis.formName

Tentunya Anda tidak dapat mengakses formulir dalam lingkup bec. itu tidak dibuat. DOM dari templat html dimuat sedikit lambat seperti konstruktor pengontrol. solusinya adalah menonton sampai DOM dimuat dan semua ruang lingkup ditentukan!

dalam controller:

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