2016-03-17 6 views
6

इसलिए मेरे पास एक टेम्पलेट वाला एक घटक है जिसमें एक फॉर्म है।कोणीय घटक घटक टेम्पलेट के अंदर एक फॉर्म प्राप्त कर रहे हैं

mycomponent.html:

<div> 
    <form name="myForm"> 
     <!-- more html code --> 
    </form> 
</div> 

मैं कैसे घटक नियंत्रक अंदर MyForm उपयोग कर सकते हैं? वर्तमान में मैं इसे प्राप्त करने के लिए $ स्कोप इंजेक्शन दे रहा हूं। या यह फ़ॉर्म पाने का एकमात्र तरीका है?

संपादित करें: कुछ कोड बेहतर जावास्क्रिप्ट

angular.module('example') 
.component('myComponent', { 

    templateUrl: 'mycomponent.html', 
    controller: function($scope) { 
     $scope.myForm // This works 
     this.myForm // undefined, can I access it through the component scope instead of $scope somehow? 
    } 
}); 
+0

आम तौर पर आप आप कोणीय में रूप में तत्वों के लिए बाध्य कहा जाता है, बल्कि साथ काम से सीधे फार्म। क्या कोई कारण है कि आपको फ़ॉर्म तत्व का उपयोग करने की आवश्यकता है? – Dave

+0

मैं $ pristine, $ valid e.t.c. की जांच करना चाहता था –

उत्तर

18

एक रूप की name विशेषता क्या कोणीय का उपयोग करता है क्या करने के लिए बाध्य करने के लिए तय करने के लिए है में वर्णन करने के लिए जोड़ा गया।

<body ng-controller="MainCtrl as vm"> 
    <form name='vm.myForm'> 
    </form> 
    </body> 

यह आपको $ गुंजाइश उपयोग किए बिना अपने नियंत्रक में संदर्भित करने की अनुमति देगा, लेकिन नियंत्रक है के बाद ही: तो, आप controllerAs सिंटैक्स का उपयोग कर रहे हैं, आप का उपयोग करने के लिए कि प्रपत्र नाम पर है सफलतापूर्वक बनाया गया:

app.controller('MainCtrl', function($scope, $timeout) { 

    var vm = this; 

    console.log(vm.myForm); // undefined 

    $timeout(function() { 
     console.log(vm.myForm); // FormController object 
    }, 100); 
}); 

यहां एक काम कर रहे plunk है।

+1

धन्यवाद, क्योंकि मैंने घटकों का उपयोग कर रहे हैं और थोड़ी-थोड़ी संशोधन के साथ काम किया है, जहां तक ​​मुझे "mainctrl vm" के रूप में जाना है। <फॉर्म नाम = '$ ctrl.myForm'> नाम के रूप में और फिर कोणीय घटक में इसके रूप में पहुंच योग्य। –

+1

क्या आप कोणीय 1.5 का उपयोग कर रहे हैं? यह घटकों के लिए भी 'नियंत्रक एएस' के लिए डिफ़ॉल्ट मान के रूप में स्वचालित रूप से '$ ctrl' जोड़ता है। – Dave

+0

हां, कोणीय 1.5 और मैं देखता हूं। भविष्य के लिए जानना अच्छा है! –

1

, नाम वाक्य रचना लेकिन यह भी एक घटक postLink जीवन चक्र हुक का प्रयोग करें कि समारोह में एक बार टेम्पलेट और नियंत्रक कनेक्ट किया गया है को देखने के https://docs.angularjs.org/guide/component

संबंधित मुद्दे