গতিশীল বৈধতা এবং AngularJS সহ একটি ফর্মের নাম

Question 1

আমার এই ফর্মটি রয়েছে: http://jsfiddle.net/dfJeN/

আপনি দেখতে পাচ্ছেন ইনপুটটির জন্য নামের মানটি স্থিরভাবে সেট করা আছে:

name="username"

, ফর্ম বৈধতা ঠিকঠাক কাজ করে (কিছু যুক্ত করুন এবং ইনপুট থেকে সমস্ত পাঠ্য অপসারণ করুন, একটি পাঠ্য অবশ্যই উপস্থিত হবে)।

তারপরে আমি গতিরূপে নামটির মান সেট করার চেষ্টা করব: http://jsfiddle.net/jNWB8/

name="{input.name}"

তারপরে আমি আমার বৈধতার সাথে এটি প্রয়োগ করি

login.{{input.name}}.$error.required

(এই প্যাটার্নটি এনজি-রিপিটে ব্যবহৃত হবে) তবে আমার ফর্মের বৈধতা ভঙ্গ হয়েছে। এটি আমার ব্রাউজারে সঠিকভাবে ব্যাখ্যা করা হয়েছে (আমি যদি উপাদানটি দেখেছি যা আমি login.username দেখেছি।। ত্রুটি.প্রাপ্ত) qu

কোন ধারণা ?

সম্পাদনা: কনসোলে স্কোপ লগ করার পরে এটি প্রদর্শিত হয়

{{input.name}}

এক্সপ্রেশন বিচ্ছিন্ন হয় না। আমার ফর্মটি {{ইনপুট.নেম}} বৈশিষ্ট্য হিসাবে তবে কোনও ব্যবহারকারীর নাম নেই।

আপডেট: 1.3.0-rc.3 নাম = "{{ইনপুট.নেম}}" প্রত্যাশার মতো কাজ করে। দয়া করে # 1404 দেখুন

Question 2

আপনি যেভাবে চেষ্টা করছেন তা আপনি করতে পারবেন না।

আপনি যা করতে চেষ্টা করছেন তা ধরে নিচ্ছেন এনজি-রিপিটের মতো কিছু দিয়ে আপনার কোনও গতিশীলভাবে উপাদানগুলিকে যুক্ত করতে হবে , সেই স্বতন্ত্র আইটেমগুলির বৈধতা দেওয়ার জন্য আপনাকে নেস্টেড এনজি-ফর্ম ব্যবহার করতে হবে :

<form name="outerForm">
<div ng-repeat="item in items">
   <ng-form name="innerForm">
      <input type="text" name="foo" ng-model="item.foo" />
      <span ng-show="innerForm.foo.$error.required">required</span>
   </ng-form>
</div>
<input type="submit" ng-disabled="outerForm.$invalid" />
</form>

দুঃখের বিষয়, এটি কৌণিকর কোনও ঠিকঠাক বৈশিষ্ট্য নয়।

Question 3

নেস্টেড এনজিএফর্ম ব্যবহার আপনাকে HTML টেমপ্লেটের মধ্যে থেকে নির্দিষ্ট ইনপুটকন্ট্রোলার অ্যাক্সেস করতে দেয়। তবে আপনি যদি অন্য কোনও নিয়ামকের কাছ থেকে এটি অ্যাক্সেস করতে চান তবে এটি কোনও লাভ করে না।

যেমন

<script>
  function OuterController($scope) {
    $scope.inputName = 'dynamicName';

    $scope.doStuff = function() {
      console.log($scope.formName.dynamicName); // undefined
      console.log($scope.formName.staticName); // InputController
    }
  }
</script>

<div controller='OuterController'>
  <form name='myForm'>
    <input name='{{ inputName }}' />
    <input name='staticName' />
  </form>
  <a ng-click='doStuff()'>Click</a>
</div>

সমস্যাটি সমাধানে সহায়তা করতে আমি এই নির্দেশিকাটি ব্যবহার করি:

angular.module('test').directive('dynamicName', function($compile, $parse) {
  return {
    restrict: 'A',
    terminal: true,
    priority: 100000,
    link: function(scope, elem) {
      var name = $parse(elem.attr('dynamic-name'))(scope);
      // $interpolate() will support things like 'skill'+skill.id where parse will not
      elem.removeAttr('dynamic-name');
      elem.attr('name', name);
      $compile(elem)(scope);
    }
  };
});

এখন আপনি ডাইনামিক নাম ব্যবহার করুন যেখানেই প্রয়োজন সেখানে 'নাম' বৈশিষ্ট্যের পরিবর্তে কেবল 'গতিশীল-নাম' বৈশিষ্ট্যটি।

যেমন

<script>
  function OuterController($scope) {
    $scope.inputName = 'dynamicName';

    $scope.doStuff = function() {
      console.log($scope.formName.dynamicName); // InputController
      console.log($scope.formName.staticName); // InputController
    }
  }
</script>

<div controller='OuterController'>
  <form name='myForm'>
    <input dynamic-name='inputName' />
    <input name='staticName' />
  </form>
  <a ng-click='doStuff()'>Click</a>
</div>

Question 4

সমস্যা AngularJS 1.3 সংশোধন করা উচিত, এই আলোচনা অনুযায়ী গিটহাব ।

এদিকে, @ ক্যাটপ এবং @ থিংসকেপ দ্বারা তৈরি করা একটি অস্থায়ী সমাধান :

// Workaround for bug #1404
// https://github.com/angular/angular.js/issues/1404
// Source: http://plnkr.co/edit/hSMzWC?p=preview
app.config(['$provide', function($provide) {
    $provide.decorator('ngModelDirective', function($delegate) {
        var ngModel = $delegate[0], controller = ngModel.controller;
        ngModel.controller = ['$scope', '$element', '$attrs', '$injector', function(scope, element, attrs, $injector) {
            var $interpolate = $injector.get('$interpolate');
            attrs.$set('name', $interpolate(attrs.name || '')(scope));
            $injector.invoke(controller, this, {
                '$scope': scope,
                '$element': element,
                '$attrs': attrs
            });
        }];
        return $delegate;
    });
    $provide.decorator('formDirective', function($delegate) {
        var form = $delegate[0], controller = form.controller;
        form.controller = ['$scope', '$element', '$attrs', '$injector', function(scope, element, attrs, $injector) {
            var $interpolate = $injector.get('$interpolate');
            attrs.$set('name', $interpolate(attrs.name || attrs.ngForm || '')(scope));
            $injector.invoke(controller, this, {
                '$scope': scope,
                '$element': element,
                '$attrs': attrs
            });
        }];
        return $delegate;
    });
}]);

জেএসফিডেলে ডেমো ।

Question 5

@EnISeeK এর মাধ্যমে খুব সুন্দর .... তবে আমি এটি আরও মার্জিত এবং অন্যান্য নির্দেশের প্রতি কম বাধা হয়ে উঠতে পেরেছি:

.directive("dynamicName",[function(){
    return {
        restrict:"A",
        require: ['ngModel', '^form'],
        link:function(scope,element,attrs,ctrls){
            ctrls[0].$name = scope.$eval(attrs.dynamicName) || attrs.dynamicName;
            ctrls[1].$addControl(ctrls[0]);
        }
    };
}])

Question 6

এনলিজিক সমাধানের তুলনায় সামান্য উন্নতি

angular.module('test').directive('dynamicName', ["$parse", function($parse) {
 return {
    restrict: 'A',
    priority: 10000, 
    controller : ["$scope", "$element", "$attrs", 
           function($scope, $element, $attrs){
         var name = $parse($attrs.dynamicName)($scope);
         delete($attrs['dynamicName']);
         $element.removeAttr('data-dynamic-name');
         $element.removeAttr('dynamic-name');
          $attrs.$set("name", name);
    }]

  };
}]);

এখানে একটি প্লাঙ্কার ট্রায়াল । এখানে বিস্তারিত ব্যাখ্যা দেওয়া আছে

Question 7

আমি গতিশীলভাবে তৈরি নেস্টেড এনজি-ফর্মগুলিকে এই জাতীয় মঞ্জুরি দেওয়ার জন্য @ ক্যাটপ এবং @ থিংসক্যাপ সমাধানটি কিছুটা প্রসারিত করেছি :

<div ng-controller="ctrl">
    <ng-form name="form">
        <input type="text" ng-model="static" name="static"/>

        <div ng-repeat="df in dynamicForms">
            <ng-form name="form{{df.id}}">
                <input type="text" ng-model="df.sub" name="sub"/>
                <div>Dirty: <span ng-bind="form{{df.id}}.$dirty"></span></div>
            </ng-form>
        </div>

        <div><button ng-click="consoleLog()">Console Log</button></div>
        <div>Dirty: <span ng-bind="form.$dirty"></span></div>
    </ng-form>      
</div>

জেএসফিডেলে আমার ডেমোটি এখানে ।

Question 8

আমি বেন লেশের সমাধানটি ব্যবহার করেছি এবং এটি আমার পক্ষে ভাল কাজ করে। তবে একটি সমস্যার মুখোমুখি হ'ল আমি যখন ব্যবহার করে অভ্যন্তরীণ ফর্ম যুক্ত করেছি, তখন ফর্মের ng-formসমস্ত রাজ্যগুলি উদাহরণস্বরূপ, form.$valid, form.$errorআমি যদি ng-submitনির্দেশটি ব্যবহার করতাম তবে অপরিজ্ঞাত হয়ে যায়।

সুতরাং যদি আমি উদাহরণস্বরূপ এটি ছিল:

<form novalidate ng-submit="saveRecord()" name="outerForm">
    <!--parts of the outer form-->
    <ng-form name="inner-form">
      <input name="someInput">
    </ng-form>
    <button type="submit">Submit</button>
</form>

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

$scope.saveRecord = function() {
    outerForm.$valid // this is undefined
}

সুতরাং ফর্মটি জমা দেওয়ার জন্য আমাকে নিয়মিত ক্লিক ইভেন্টটি ব্যবহার করতে ফিরে যেতে হয়েছিল যার ক্ষেত্রে ফর্ম অবজেক্টটি পাস করার প্রয়োজন:

<form novalidate name="outerForm">  <!--remove the ng-submit directive-->
    <!--parts of the outer form-->
    <ng-form name="inner-form">
      <input name="someInput">
    </ng-form>
    <button type="submit" ng-click="saveRecord(outerForm)">Submit</button>
</form>

এবং সংশোধিত নিয়ন্ত্রক পদ্ধতি:

$scope.saveRecord = function(outerForm) {
    outerForm.$valid // this works
}

আমি কেন এটি নিশ্চিত তা নিশ্চিত নই তবে আশা করি এটি কারও সহায়ক।

Question 9

এই সমস্যাটি কৌনিক 1.3+ এ স্থির করা হয়েছে আপনি যা করতে চেষ্টা করছেন এটির জন্য এটি সঠিক বাক্য গঠন:

login[input.name].$invalid

Question 10

যদি আমরা নীচের মত একটি ইনপুট জন্য গতিশীল নাম সেট করে

<input name="{{dynamicInputName}}" />

তারপরে আমরা নীচের কোডের মতো গতিশীল নামের জন্য সেট বৈধতা ব্যবহার করেছি।

<div ng-messages="login.dynamicInputName.$error">
   <div ng-message="required">
   </div>
</div>