আমি কি নিয়ামকের কোনও ফর্ম অ্যাক্সেস করতে পারি?


152

আমি বর্তমানে নিম্নলিখিত ব্যবহার করছি।

$scope.$$childHead.customerForm[firstName], যাতে:

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

তবে এটি কেবল ক্রোমে কাজ করে। এখন আমি নিম্নলিখিতটি চেষ্টা করেছি:

$scope.editCustomerForm[firstName], যাতে:

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

যা কাজ করে না। নোট করুন আমার ফর্মটি একটি ফাউন্ডেশন ট্যাবের ভিতরে রয়েছে। আমি কীভাবে অ্যাক্সেস করতে পারি firstName?

সম্পাদনা : দেখে মনে হচ্ছে এটি কোনও ফাউন্ডেশন ট্যাবের অভ্যন্তরে formযুক্ত হয় নি scope

এর সমাধান কি কেউ পেয়েছেন?

উত্তর:


210

যদিও অন্যান্য মন্তব্যে ইঙ্গিত করা হয়েছে আমি ভেবেছিলাম যে "কন্ট্রোলার অ্যাস" সিনট্যাক্স ব্যবহারকারীদের জন্য আমি এটি কিছুটা বানান করব:

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

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

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

</div>

তারপরে আপনি আপনার কোডগুলিতে ফর্মকন্ট্রোলার অ্যাক্সেস করতে পারবেন:

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

    function saveChanges() {

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

আমি যতদূর দেখতে পাচ্ছি, টেমপ্লেটটি "সেভ চেঞ্জস" পদ্ধতিটি কল করতে পারে না, কারণ এটি টেমপ্লেটের সংস্পর্শে আসে না
স্পোক ডেস্ক

2
"সেভচেনজেস" পদ্ধতিটি জাভাস্ক্রিপ্টের 3 লাইনে প্রকাশিত হয়েছে বা আমি ভুল বোঝাবুঝি করছি?
opালুপা

3
এটি ভাল কারণ এটির অর্থ আপনি পুরো স্কোপটি ইনজেকশন এড়াতে পারবেন যা আমার মতে পরিষ্কার
72GM

2
আপনি এটি জুঁইতে কীভাবে পরীক্ষা করেন? আমার অনুমানে, vm.myForm অপরিজ্ঞাত
বাহরিয়েন

1
এটি 1.5.X এর জন্য সরকারী দস্তাবেজে নোট করা উচিত এটি উপাদান এবং এস 6 করার উপায়। ধন্যবাদ স্যার
MatanCo

91

আপনি কিছু অবজেক্টের সাথে ফর্মটি সংযুক্ত করতে পারেন যা প্যারেন্ট কন্ট্রোলারে সংজ্ঞায়িত। তারপরে আপনি এমনকি বাচ্চার সুযোগ থেকেও আপনার ফর্মটিতে পৌঁছে যেতে পারেন।

পিতা বা মাতা নিয়ামক

$scope.forms = {};

একটি শিশু সুযোগে কিছু টেমপ্লেট

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

সমস্যাটি হ'ল কন্ট্রোলারে কোড কার্যকর করার মুহুর্তে ফর্মটি সংজ্ঞায়িত করতে হয় না। সুতরাং আপনাকে এই জাতীয় কিছু করতে হবে

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

10
আমি var watcher = $scope.$watcherযদি বিবৃতিটি ব্যবহারের অভ্যন্তরে বা অভ্যন্তরে পরামর্শ দিই আপনি ঘড়িটি বাঁধাই করতে প্রহরীকে () উত্তেজিত করবেন। এটি এটিকে 1 বারের মতো ঘড়ি তৈরি করে যাতে আপনি এটি নির্ধারণের পরে প্রতিটি ডাইজেস্ট দেখছেন না
উইলজেক

91

আপনি যদি বৈধতার জন্য নিয়ামকের কাছে ফর্মটি পাস করতে চান তবে আপনি কেবল জমা দেওয়ার ব্যবস্থাপনার পক্ষে যুক্তি হিসাবে এটি পাস করতে পারেন। ফর্মের নামটি ব্যবহার করুন, সুতরাং মূল প্রশ্নের জন্য এটি এমন কিছু হবে:

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

13
ভবিষ্যতে পাঠকদের জন্য নির্মল যদি বলে আপনার ফর্ম নামে / এই অনুরূপ সংজ্ঞায়িত করা হয় <form name="myform"></form>, অথবা এমনকি <div ng-form name="myform"></div>, তারপর আপনার ক্লিকের ঘটনা নিম্নরূপ হবে: ng-click="submit(myform)"। : তারপর আপনি কৌণিক ফর্ম বস্তুর আপনার ক্লিক ফাংশনে মত অ্যাক্সেস করতে পারেন $scope.submit = function (form) { if (form.$valid) {ইত্যাদি
Matty জে

আমি এখানে একটি সমস্যা পেয়েছি - আসুন ধরা যাক ফর্মটিতে একটি ড্রপডাউন তালিকা রয়েছে। উপরের পদ্ধতিটি ব্যবহার করা আমাকে কেবলমাত্র দর্শনের মান দেয় এবং আমার প্রয়োজনীয় সঠিক মানটি দেয় না। বা আমি কি কোনও ভুল করছি, একটি মজার যোগ করব।
সোয়াটেক

82

একটি উত্তরের জন্য দেরিতে বিট করুন তবে নিম্নলিখিত বিকল্পের সাথে এসেছেন। এটি আমার পক্ষে কাজ করছে তবে এটি সঠিক উপায় কিনা তা নিশ্চিত নয়।

আমার দৃষ্টিতে আমি এটি করছি:

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

এবং নিয়ামক মধ্যে:

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

এখন এটি করার পরে আমি আমার নিয়ামক ভেরিয়েবলের মধ্যে আমার ফর্ম পেয়েছি যা এটি $scope.myForm


1
কেবলমাত্র আমি এতে যুক্ত করব তা নিশ্চিত হওয়া যে এটি ফর্মের নীচে রয়েছে।
এসএমবি

<Div ng-init = "setForm (formName);"> </div> এর পজিশনে কিছু আসে যায় না। এটি সাবধানে যে এটি ফর্ম অধীন।
ওয়াকাস

1
ভাল, তবে আমি একটি সহজ সমাধান পছন্দ করবো: এনজি-init = "$ প্যারেন্ট.মাইফর্ম = ফর্মনাম" কন্ট্রোলার পরিবর্তন করার প্রয়োজন নোট: এটি কেবল উপরের সমাধানের বিপরীতে সরাসরি কন্ট্রোলারের সাথে কাজ করছে
মাস্টিলভার

অন্যান্য পদ্ধতিগুলি চেষ্টা করার পরে, আমি এটির উপর স্থিতি স্থাপন করেছি কারণ এটি nameবৈশিষ্ট্যটিকে আমি যা হতে চাই তা হ'ল এটির অনুমতি দেয় । অন্যান্য ডামি-অবজেক্ট সলিউশনগুলির সমস্যা হ'ল যদি এই উপাদানটি কোনও এনজি-ফর্মের সাথে অন্য উপাদানগুলিতে ব্যবহার করা হয়, তবে অন্যান্য এনজি-ফর্ম এই নামগুলি অক্ষরে অক্ষরে ব্যবহার করে। সুতরাং এটির "dummy.myForm" নামক একটি স্ট্রিং-আক্ষরিক (নেস্টেড বৈশিষ্ট্য নয়) সহ একটি ক্ষেত্র থাকবে, আমি এটি অগ্রহণযোগ্য পেয়েছি।
তুলসী

আমি নিয়ামক সিনট্যাক্স ব্যবহার করার জন্য বহুবার চেষ্টা করেছি এবং ব্যর্থ হয়েছি (আমি d এমডিডায়ালগ সহ কাজ করছি)। অবশেষে এটির জন্য স্থির হয়ে গেল এবং এটি দুর্দান্ত কাজ করেছে। কেবলমাত্র নোটটি হ'ল যে কোনও কন্ট্রোলার সূচনাটি $ টাইমআউট এ চালানো দরকার কারণ নিয়ামক প্রথম রান করার সময় ফর্মটি পাওয়া যায় না
পিটার নিক্সে

22

আপনার নিয়ামকটিতে ফর্মটি অ্যাক্সেস করতে সক্ষম হতে আপনাকে এটিকে একটি ডামি স্কোপ অবজেক্টে যুক্ত করতে হবে।

কিছুটা এইরকম $scope.dummy = {}

আপনার পরিস্থিতির জন্য এর অর্থ এমন কিছু হবে:

<form name="dummy.customerForm">

আপনার নিয়ন্ত্রকের মাধ্যমে আপনি ফর্মটি অ্যাক্সেস করতে সক্ষম হবেন:

$scope.dummy.customerForm

এবং আপনি পছন্দসই জিনিস করতে সক্ষম হবেন

$scope.dummy.customerForm.$setPristine()

উইকি লিঙ্ক

হচ্ছে একটি '.' আপনার মডেলগুলিতে প্রোটোটাইপাল উত্তরাধিকার কার্যকর রয়েছে তা নিশ্চিত করবে। সুতরাং, <input type="text" ng-model="someObj.prop1">বরং ব্যবহার করুন<input type="text" ng-model="prop1">

আপনি যদি সত্যই কোনও আদিম ব্যবহার করতে চান তবে দুটি কার্যকারিতা রয়েছে:

1. সন্তানের সুযোগে $ পিতামাতা.পিতা-পিতাস্কোপ প্রোপার্টি ব্যবহার করুন। এটি সন্তানের সুযোগকে নিজের সম্পত্তি তৈরি থেকে বাধা দেবে। ২. পিতামাতার ক্ষেত্রের কোনও ক্রিয়াকলাপটি সংজ্ঞায়িত করুন এবং আধ্যাত্মিক মানটি পিতামাতার কাছে পৌঁছে দিয়ে শিশু থেকে কল করুন (সর্বদা সম্ভব নয়)


ফর্মের বাধ্যবাধকতা নির্ধারণের কার্যকর অঞ্চলটি কোথায়?
গাস ক্রফোর্ড

এটি উল্লেখ করার মতো বিষয় যে ফর্ম উপাদানটির উপর শর্তযুক্ত হওয়া উচিত dummy.customerFormশর্ত ng-ifপূরণ না হওয়া অবধি সংজ্ঞায়িত ng-ifহবে
হ্যাক্সেক্সটস্টন

22

এই উত্তরটি একটু দেরীতে হলেও আমি এমন একটি সমাধানে হোঁচট খেয়েছি যা সবকিছুকে খুব সহজ করে তোলে।

আপনি যদি নিয়ামক সিন্ট্যাক্স ব্যবহার করেন এবং তারপরে এটি আপনার "এই" পরিবর্তনশীল থেকে উল্লেখ করেন তবে আপনি ফর্মের নামটি সরাসরি আপনার নিয়ামকের কাছে অর্পণ করতে পারেন। আমি এখানে আমার কোডটিতে এটি করেছি কীভাবে:

আমি ইউআই-রাউটারের মাধ্যমে কন্ট্রোলারটি কনফিগার করেছি (তবে আপনি এটি চাইলে এটি করতে পারেন, এমনকি এইচটিএমএলে সরাসরি এর মতো কিছু দিয়ে <div ng-controller="someController as myCtrl">) এটি কোনও ইউআই-রাউটার কনফিগারেশনের মতো দেখতে দেখতে এটি হতে পারে:

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

এবং তারপরে এইচটিএমএলে, আপনি কেবল ফর্মের নামটি "নিয়ন্ত্রণকারী" হিসাবে সেট করেছেন "" নাম "এর মতো:

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

এখন আপনার নিয়ামকের ভিতরে আপনি খুব সহজভাবে এটি করতে পারেন:

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

2
যদিও এটি বেশিরভাগ অন্যান্য উত্তরগুলির পরামর্শ হিসাবে কেবল একই কৌশল, তবে এটি সর্বোত্তম প্রকরণ এবং গ্রহণযোগ্য উত্তর হওয়া উচিত, বিশেষত যেহেতু প্রত্যেকে এখন যেভাবেই নিয়ন্ত্রণকারী ব্যবহার করে।
সেমিকোলন

6

হ্যাঁ, আপনি কন্ট্রোলারে একটি ফর্ম অ্যাক্সেস করতে পারেন ( ডক্সে বর্ণিত হিসাবে )।

যখন আপনার ফর্মটি নিয়ামক স্কোপে সংজ্ঞায়িত হয় না এবং পরিবর্তে একটি শিশু স্কোপে সংজ্ঞায়িত হয়।

মূলত, কিছু কৌণিক নির্দেশাবলী, যেমন ng-if, ng-repeatবা ng-include, একটি বিচ্ছিন্ন সন্তানের সুযোগ তৈরি করবে। সুতরাং scope: {}সংজ্ঞায়িত সম্পত্তি সহ কোনও কাস্টম নির্দেশাবলী । সম্ভবত, আপনার ভিত্তি উপাদানগুলিও আপনার পথে রয়েছে।

ট্যাগটির ng-ifচারপাশে একটি সাধারণ প্রবর্তন করার সময় আমারও একই সমস্যা ছিল <form>

আরও তথ্যের জন্য এগুলি দেখুন:

দ্রষ্টব্য: আমি আপনাকে আপনার প্রশ্নটি পুনরায় লেখার পরামর্শ দিচ্ছি। আপনার প্রশ্নের উত্তর হ্যাঁ তবে আপনার সমস্যাটি কিছুটা পৃথক:

আমি কি নিয়ামকের কাছ থেকে কোনও শিশু সুযোগে কোনও ফর্ম অ্যাক্সেস করতে পারি?

যার উত্তরটি সহজভাবে হবে: না


... আপনি যদি নিজের ফর্ম এবং কন্ট্রোলার সেট না করেন তবে যতক্ষণ না @ উত্তরদের উত্তরে বর্ণিত (ব্যবহার $scope.forms = {}এবং name="forms.form1")
মারাপেট

খলিল রাভান্না আপনার উত্তরটি সঙ্গে সঙ্গেই দেখুন। আপনি $ স্কোপ.ফর্মনেম থেকে ফর্মটি অ্যাক্সেস করতে পারেন। তিনি একটি কাজের উদাহরণ সরবরাহ করেন
মাইকাবলু

3

ng-model="$ctrl.formName"আপনার ফর্মটিতে অ্যাট্রিবিউট যুক্ত করুন এবং তারপরে নিয়ামকটিতে আপনি নিজের কন্ট্রোলারের অভ্যন্তরে অবজেক্ট হিসাবে ফর্মটি অ্যাক্সেস করতে পারবেনthis.formName


0

অবশ্যই আপনি সুযোগ সুযোগে ফর্ম অ্যাক্সেস করতে পারবেন না। এটি তৈরি হয় না। এইচটিএমএল টেমপ্লেট থেকে ডিওএম নিয়ামক কনস্ট্রাক্টরের মতো ধীরে ধীরে লোড হয়। সমাধানটি ডিওএম লোড না হওয়া এবং সমস্ত স্কোপ সংজ্ঞায়িত হওয়া অবধি দেখা হয়!

নিয়ামক ইন:

$timeout(function(){
    console.log('customerForm:', $scope.customerForm);
    // everything else what you need
});
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.