এনজি-রিপিট, এনজি-শো (কৌণিক) ব্যবহার করে কীভাবে গতিশীলভাবে তৈরি ইনপুটগুলিকে বৈধতা দেওয়া যায়


167

আমার কাছে একটি টেবিল রয়েছে যা এনজি-রিপিট ব্যবহার করে তৈরি করা হয়েছে। আমি টেবিলের প্রতিটি উপাদানটিতে বৈধতা যুক্ত করতে চাই। সমস্যাটি হ'ল প্রতিটি ইনপুট সেলটির উপরে এবং নীচে তার একই নাম রয়েছে। আমি {{$index}}ইনপুটগুলির নামকরণের জন্য মানটি ব্যবহার করার চেষ্টা করেছি , তবে এইচটিএমএলে স্ট্রিং লিটারেলগুলি সঠিকভাবে উপস্থিত হওয়া সত্ত্বেও, এটি এখন কাজ করছে।

এখানে আমার কোডটি এখানে রয়েছে:

<tr ng-repeat="r in model.BSM ">
   <td>
      <input ng-model="r.QTY" class="span1" name="QTY{{$index}}" ng-pattern="/^[\d]*\.?[\d]*$/" required/>
      <span class="alert-error" ng-show="form.QTY{{$index}}.$error.pattern"><strong>Requires a number.</strong></span>
      <span class="alert-error" ng-show="form.QTY{{$index}}.$error.required"><strong>*Required</strong></span>
   </td>
</tr>

আমি {{}}সূচী থেকে অপসারণের চেষ্টা করেছি , তবে এটিও কার্যকর হয় না। এখন পর্যন্ত, ইনপুটটির বৈধতা সম্পত্তিটি সঠিকভাবে কাজ করছে, তবে ত্রুটি বার্তা প্রদর্শিত হচ্ছে না।

কারও কোন পরামর্শ আছে?

সম্পাদনা করুন: নীচের দুর্দান্ত উত্তরের পাশাপাশি, এখানে একটি ব্লগ নিবন্ধ রয়েছে যা এই সমস্যাটিকে আরও বিশদে কভার করে: http://www.thebhwgroup.com/blog/2014/08/angularjs-html-form-design-part-2 /


4
২০১৫ সালে যারা এটি পড়ছেন তাদের জন্য ... শীর্ষে ভোট দেওয়া উত্তর এখন আর সঠিক নয়। নিচের দিকে তাকান। :)
উইল স্ট্রোহল

এটিই উইল স্ট্রোহল সম্পর্কে "2015 সালের" উত্তর বলে মনে হচ্ছে।
ওসিরিস

এখানে উপযুক্ত এসও শিষ্টাচার কি? সেই সময়টি সঠিক হওয়ার কারণে আমি কি গ্রহণযোগ্য উত্তরটি ছেড়ে দেব বা আজকের সঠিক উত্তরটি গ্রহণ করব? নতুন দর্শকদের জন্য সহায়ক হিসাবে এই আপাতদৃষ্টিতে জনপ্রিয় থ্রেডটি চাই।
পিফরাঞ্চাইজি

@ ফ্র্যাঞ্চাইজি, আমি জানি না তবে আমি মনে করি এটি সম্পর্কে একটি দৃশ্যমান নোট সাহায্য করতে পারে। আপনার প্রশ্নের সম্পাদনা হিসাবে হতে পারে, তাই নোটটি যেখানে আরও বেশি লোকেরা দেখতে পাবে সেখানে রইল।
ওসিরিস

উত্তর:


197

অ্যাঙ্গুলারজেএস বৈধতা ত্রুটিগুলি প্রকাশ করতে ইনপুট নামের উপর নির্ভর করে।

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

'ডায়নামিক নাম' সমস্যা সমাধানের জন্য আপনাকে একটি অভ্যন্তরীণ ফর্ম তৈরি করতে হবে ( এনজি-ফর্ম দেখুন ) :

<div ng-repeat="social in formData.socials">
      <ng-form name="urlForm">
            <input type="url" name="socialUrl" ng-model="social.url">
            <span class="alert error" ng-show="urlForm.socialUrl.$error.url">URL error</span>
      </ng-form>
  </div>

অন্য বিকল্প হ'ল এটির জন্য একটি কাস্টম নির্দেশিকা লিখুন।

এখানে এনজিফর্মের ব্যবহার দেখানো জেএসফিডাল: http://jsfiddle.net/pkozlowski_opensource/XK2ZT/2/


2
দারুণ. তবে একই নামের একাধিক পাঠ্য বাক্স রাখা কি এইচটিএমএলকে বৈধ?
ইয়ান ওয়ারবার্টন

1
নেস্টিং ফর্মগুলি বৈধ এইচটিএমএল স্ট্যাকওভারফ্লো.com/ প্রশ্নস / 937৯6১০ / ক্যান- ইয়ু- নেস্ট- এইচটিএমএল- রূপে বিবেচিত হয় না কৌণিক পরিকল্পনা কি এটির জন্য কোনও স্থির পরিকল্পনা করে?
ব্লসী

11
@ ব্লোজি আপনি এখানে আসল ফর্মটি বাসা বাঁধছেন না , বরং ng-formডোম উপাদানগুলি, তাই অন্য SO প্রশ্নের লিঙ্কটি এখানে প্রাসঙ্গিক নয়।
pkozlowski.opensource

7
গ্রেট। এটি লক্ষ্য করা উচিত যে আপনার ng-repeatযদি আবদ্ধ থাকে table trতবে আপনাকে ng-form="myname"অ্যাটর ব্যবহার করতে হবে ।
ivkremer

11
এই উত্তরটি সম্পাদনা করা উচিত: অ্যাঙ্গুলারজেএস ১.৩.০ (সেপ্টেম্বর ২০১৪ থেকে প্রতিশ্রুতি)
-র

228

যেহেতু প্রশ্ন জিজ্ঞাসা করা হয়েছিল কৌণিক দল ইনপুট নামগুলি গতিশীলভাবে তৈরি করা সম্ভব করে এই সমস্যাটি সমাধান করেছে।

সঙ্গে কৌণিক সংস্করণ 1.3 এবং পরে আপনি এখন এটা করতে পারেন:

<form name="vm.myForm" novalidate>
  <div ng-repeat="p in vm.persons">
    <input type="text" name="person_{{$index}}" ng-model="p" required>
    <span ng-show="vm.myForm['person_' + $index].$invalid">Enter a name</span>
  </div>
</form>

ডেমো

কৌণিক 1.3 এছাড়াও এনজিমেজেস প্রবর্তন করেছিল, ফর্ম বৈধতার জন্য আরও শক্তিশালী একটি সরঞ্জাম। আপনি এনজিমেজেস সহ একই কৌশলটি ব্যবহার করতে পারেন:

<form name="vm.myFormNgMsg" novalidate>
    <div ng-repeat="p in vm.persons">
      <input type="text" name="person_{{$index}}" ng-model="p" required>
      <span ng-messages="vm.myFormNgMsg['person_' + $index].$error">
        <span ng-message="required">Enter a name</span>
      </span>
    </div>
  </form>

2
এটি নিখুঁত এবং দিকনির্দেশনা করার চেয়ে অনেক সহজ - একটি ফর্মকে উপাদানগুলিতে পাস করতে পারে এবং এই পদ্ধতিটি ব্যবহার করতে পারে। ধন্যবাদ বন্ধু!
দিনকিডানি

আমি লক্ষ্য করেছি যে আপনি যদি এটি কাজ করতে চান তবে আপনার ফর্ম নামের হাইফেন থাকতে পারে না। কেউ কি জানো এটা কেনো?
প্যাট্রিক জাজালাপস্কি

@ পেট্রিকসালাপস্কি: এটি কারণ ফর্মের নামটি কৌণিক এবং হাইফেন সহ পরিবর্তনশীল নামগুলি জাভাস্ক্রিপ্টে বৈধ বাক্য গঠন নয় not কার্যতালিকা: <স্প্যান এনজি-শো = "ভিএম ['আমার-ফর্ম'] [[ব্যক্তি_ '+ $ সূচক]। $ অবৈধ"> নাম লিখুন </ span>
HoffZ

আমি লক্ষ্য করেছি যে আপনি যদি কোনও পুনরাবৃত্তি আইটেমটি গতিশীলভাবে মুছে ফেলেন তবে ইনপুটটির $validসম্পত্তিটি ভুলভাবে হয়ে যায়false
jonathanwiesel

ফর্মের শীর্ষে আপনার সমস্ত ত্রুটিগুলি এক জায়গায় প্রদর্শিত হতে চান?
কোডিংবিবিকি

13

আপনি যদি এনজি-ফর্মটি ব্যবহার করতে না চান তবে আপনি একটি কাস্টম নির্দেশিকা ব্যবহার করতে পারেন যা ফর্মের নামের বৈশিষ্ট্যকে পরিবর্তন করবে। এই নির্দেশকে আপনার এনজি-মডেলের মতো একই উপাদানটিতে একটি গুণ হিসাবে রাখুন।

আপনি যদি অন্য নির্দেশাবলী একযোগে ব্যবহার করে থাকেন তবে সাবধান হন যে তাদের "টার্মিনাল" সম্পত্তি সেট না রয়েছে অন্যথায় এই ফাংশনটি চলতে সক্ষম হবে না (প্রদত্ত যে এটির -1 এর অগ্রাধিকার রয়েছে)।

উদাহরণস্বরূপ, এনজি-বিকল্পগুলির সাহায্যে এই নির্দেশিকাটি ব্যবহার করার সময়, আপনাকে অবশ্যই এই এক লাইন বানকিপ্যাচটি চালাতে হবে: https://github.com/AlJohri/bower-angular/commit/eb17a967b7973eb7fc1124b024aa8b3ca540a155

angular.module('app').directive('fieldNameHack', function() {
    return {
      restrict: 'A',
      priority: -1,
      require: ['ngModel'],
      // the ngModelDirective has a priority of 0.
      // priority is run in reverse order for postLink functions.
      link: function (scope, iElement, iAttrs, ctrls) {

        var name = iElement[0].name;
        name = name.replace(/\{\{\$index\}\}/g, scope.$index);

        var modelCtrl = ctrls[0];
        modelCtrl.$name = name;

      }
    };
});

আমি প্রায়শই g সূচকটি একটি ভেরিয়েবল নামের সাথে সেট করতে এনজি-আরআই ব্যবহার করা দরকারী বলে মনে করি। উদাহরণ স্বরূপ:

<fieldset class='inputs' ng-repeat="question questions" ng-init="qIndex = $index">

এটি আপনার নিয়মিত প্রকাশকে এতে পরিবর্তন করে:

name = name.replace(/\{\{qIndex\}\}/g, scope.qIndex);

আপনার যদি একাধিক নেস্টেড এনজি-পুনরাবৃত্তি থাকে তবে আপনি এখন $ পিতামাতার $ সূচীর পরিবর্তে এই পরিবর্তনশীল নামগুলি ব্যবহার করতে পারেন।

নির্দেশাবলীর জন্য "টার্মিনাল" এবং "অগ্রাধিকার" এর সংজ্ঞা : https://docs.angularjs.org/api/ng/service/ $ সংকলন # ডিরেক্টরি-সংজ্ঞা-অবজেক্ট

এনজি-অপশন ম্যানকিপ্যাচের প্রয়োজনীয়তা সম্পর্কে গিথুব মন্তব্য: https://github.com/angular/angular.js/commit/9ee2cdff44e7d496774b340de816344126c457b3#commitcomment-6832095 https://twitter.com/aljohri/status/4829635415320

হালনাগাদ:

আপনি এনজি-ফর্ম দিয়েও এই কাজটি করতে পারেন।

angular.module('app').directive('formNameHack', function() {
    return {
      restrict: 'A',
      priority: 0,
      require: ['form'],
      compile: function() {
        return {
          pre: function(scope, iElement, iAttrs, ctrls) {
            var parentForm = $(iElement).parent().controller('form');
            if (parentForm) {
                var formCtrl = ctrls[0];
                delete parentForm[formCtrl.$name];
                formCtrl.$name = formCtrl.$name.replace(/\{\{\$index\}\}/g, scope.$index);
                parentForm[formCtrl.$name] = formCtrl;
            }
          }
        }
      }
    };
});

3
কেবল এটি পরিষ্কার করার জন্য, এই উত্তরটি নির্বাচিত হচ্ছে না, এটি সেরা উত্তর না হওয়ার ইঙ্গিত দিচ্ছে না। মূলত প্রশ্নটি জিজ্ঞাসা করার প্রায় 2 বছর পরে এটি পোস্ট করা হয়েছিল। আপনি যদি এই একই সমস্যাটিতে চালিত হন তবে নির্বাচিত উত্তর ছাড়াও আমি এই উত্তর এবং টমগ্রিন উভয়ই বিবেচনা করব।
পিফরঞ্চাইজি

11

আপনি যে এনজি-পুনরাবৃত্তি নির্দেশিকা ব্যবহার করছেন সেই ট্যাগের অভ্যন্তরে এনজি-ফর্ম নির্দেশিকা ব্যবহার করুন। এরপরে আপনি জেনেরিক নাম উল্লেখ করতে এনজি-ফর্ম নির্দেশিকা দ্বারা তৈরি স্কোপটি ব্যবহার করতে পারেন। উদাহরণ স্বরূপ:

    <div class="form-group col-sm-6" data-ng-form="subForm" data-ng-repeat="field in justificationInfo.justifications"">

        <label for="{{field.label}}"><h3>{{field.label}}</h3></label>
        <i class="icon-valid" data-ng-show="subForm.input.$dirty && subForm.input.$valid"></i>
        <i class="icon-invalid" data-ng-show="subForm.input.$dirty && subForm.input.$invalid"></i>
        <textarea placeholder="{{field.placeholder}}" class="form-control" id="{{field.label}}" name="input" type="text" rows="3" data-ng-model="field.value" required>{{field.value}}</textarea>

    </div>

Credit


গৃহীত উত্তরটি আমার পক্ষে কার্যকর হয়নি। এই এক কিন্তু করেছে। (আমি কৌনিক 2.1.14 ব্যবহার করি)
জেস্পার তেজলগার্ড

+1 এই উত্তরটি আমার পক্ষে কাজটি করেছে লিঙ্কটি পরীক্ষা করুন : আপনার কেবলমাত্র ng-form="formName"সেই ট্যাগটিতে যুক্ত করতে হবে যাতে এনজি-রিপিট ... এটি একটি
কবজির

3

নিয়ন্ত্রকের পাশে "কাস্টম বৈধকরণ" সহ আরও জটিল উদাহরণ যুক্ত করা হয়েছে http://jsfiddle.net/82PX4/3/

<div class='line' ng-repeat='line in ranges' ng-form='lineForm'>
    low: <input type='text' 
                name='low'
                ng-pattern='/^\d+$/' 
                ng-change="lowChanged(this, $index)" ng-model='line.low' />
    up: <input type='text' 
                name='up'
                ng-pattern='/^\d+$/'
                ng-change="upChanged(this, $index)" 
                ng-model='line.up' />
    <a href ng-if='!$first' ng-click='removeRange($index)'>Delete</a>
    <div class='error' ng-show='lineForm.$error.pattern'>
        Must be a number.
    </div>
    <div class='error' ng-show='lineForm.$error.range'>
        Low must be less the Up.
    </div>
</div>

1

এই সমাধানগুলি সন্ধানের জন্য, উপরে আল জোহরির দেওয়া একটি আমার প্রয়োজনের নিকটতম, তবে তার নির্দেশটি তখন আমি চেয়েছিলাম তখন কিছুটা কম প্রোগ্রামযোগ্য ছিল। এখানে তার সমাধানগুলির আমার সংস্করণটি রয়েছে:

angular.module("app", [])
    .directive("dynamicFormName", function() {
        return {
            restrict: "A",
            priority: 0,
            require: ["form"],
            compile: function() {
                return {
                    pre: function preLink(scope, iElement, iAttrs, ctrls) {
                        var name = "field" + scope.$index;

                        if (iAttrs.dnfnNameExpression) {
                            name = scope.$eval(iAttrs.dnfnNameExpression);
                        }

                        var parentForm = iElement.parent().controller("form");
                        if (parentForm) {
                            var formCtrl = ctrls[0];
                            delete parentForm[formCtrl.$name];
                            formCtrl.$name = name;
                            parentForm[formCtrl.$name] = formCtrl;
                        }
                    }
                 }
            }
        };
   });

এই সমাধানটি আপনাকে নির্দেশের কাছে একটি নাম জেনারেটর এক্সপ্রেশন দিতে দেয় এবং তিনি যে প্যাটার্নটি ব্যবহার করছেন তার বিকল্পটিতে লক ডাউন এড়াতে দেয়।

এই সমাধানটি নিয়ে প্রাথমিকভাবে আমারও সমস্যা হয়েছিল যেহেতু এটি মার্কআপে এটি ব্যবহারের উদাহরণ দেখায় না, তাই আমি এটি কীভাবে ব্যবহার করেছি তা এখানে।

<form name="theForm">
    <div ng-repeat="field in fields">
        <input type="number" ng-form name="theInput{{field.id}}" ng-model="field.value" dynamic-form-name dnfn-name-expression="'theInput' + field.id">        
    </div>
</form>

গিথুব-এ আমার আরও কাজ করার উদাহরণ রয়েছে ।


1

বৈধতা এনজি রিপিটের সাথে কাজ করছে যদি আমি নীচের বাক্য গঠন ব্যবহার করি তবে আমি scope.step3Form['item[107][quantity]'].$touched জানি না এটি একটি সেরা অনুশীলন বা সেরা সমাধান, তবে এটি কার্যকর

<tr ng-repeat="item in items">
   <td>
        <div class="form-group">
            <input type="text" ng-model="item.quantity" name="item[<% item.id%>][quantity]" required="" class="form-control" placeholder = "# of Units" />
            <span ng-show="step3Form.$submitted || step3Form['item[<% item.id %>][quantity]'].$touched">
                <span class="help-block" ng-show="step3Form['item[<% item.id %>][quantity]'].$error.required"> # of Units is required.</span>
            </span>
        </div>
    </td>
</tr>

1

পকোজ্লোস্কি.ওপেনসোর্সের উত্তরে বিল্ডিং করা , আমি গতিশীল ইনপুট নামগুলি রাখার একটি উপায় যুক্ত করেছি যা এনজিমেজেসের সাথেও কাজ করে । উপাদান এবং ব্যবহারের ng-initঅংশটি নোট করুন । পরিবর্তনশীল নাম যে জন্য পরিবর্তনশীল মান রয়েছে হয়ে এর অ্যাট্রিবিউট।ng-formfurryNamefurryNameinputname

<ion-item ng-repeat="animal in creatures track by $index">
<ng-form name="animalsForm" ng-init="furryName = 'furry' + $index">
        <!-- animal is furry toggle buttons -->
        <input id="furryRadio{{$index}}"
               type="radio"
               name="{{furryName}}"
               ng-model="animal.isFurry"
               ng-value="radioBoolValues.boolTrue"
               required
                >
        <label for="furryRadio{{$index}}">Furry</label>

        <input id="hairlessRadio{{$index}}"
               name="{{furryName}}"
               type="radio"
               ng-model="animal.isFurry"
               ng-value="radioBoolValues.boolFalse"
               required
               >
        <label for="hairlessRadio{{$index}}">Hairless</label>

        <div ng-messages="animalsForm[furryName].$error"
             class="form-errors"
             ng-show="animalsForm[furryName].$invalid && sectionForm.$submitted">
            <div ng-messages-include="client/views/partials/form-errors.ng.html"></div>
        </div>
</ng-form>
</ion-item>

1

এটি অনেক দেরিতে হলেও এটি যে কারও সাহায্য করতে পারে

  1. প্রতিটি নিয়ন্ত্রণের জন্য অনন্য নাম তৈরি করুন
  2. ব্যবহার করে যাচাই করুন fromname[uniquname].$error

কোডের উদাহরণ:

<input 
    ng-model="r.QTY" 
    class="span1" 
    name="QTY{{$index}}" 
    ng-pattern="/^[\d]*\.?[\d]*$/" required/>
<div ng-messages="formName['QTY' +$index].$error"
     ng-show="formName['QTY' +$index].$dirty || formName.$submitted">
   <div ng-message="required" class='error'>Required</div>
   <div ng-message="pattern" class='error'>Invalid Pattern</div>
</div>

এখানে কাজের ডেমো দেখুন


1

আপনি যদি এনজি-রিপিট $ সূচকটি ব্যবহার করে থাকেন

  name="QTY{{$index}}"

এবং

   <td>
       <input ng-model="r.QTY" class="span1" name="QTY{{$index}}" ng-            
        pattern="/^[\d]*\.?[\d]*$/" required/>
        <span class="alert-error" ng-show="form['QTY' + $index].$error.pattern">
        <strong>Requires a number.</strong></span>
        <span class="alert-error" ng-show="form['QTY' + $index].$error.required">
       <strong>*Required</strong></span>
    </td>

আমাদের এনজি-প্যাটার্নে এনজি-শোটি প্রদর্শন করতে হবে

   <span class="alert-error" ng-show="form['QTY' + $index].$error.pattern">
   <span class="alert-error" ng-show="form['QTY' + $index].$error.required">

0

এটি সম্ভব এবং এখানে ইনপুটগুলির একটি টেবিল দিয়ে আমি একই জিনিসটি কীভাবে করব।

যেমন একটি ফর্ম টেবিল মোড়ানো

তারপরে এটি ব্যবহার করুন

আমার একাধিক নেস্টেড নির্দেশিকা রয়েছে যাতে সমস্ত ইনপুট (গুলি), নির্বাচন (গুলি) ইত্যাদি থাকে ... এই উপাদানগুলি সমস্ত এনজি-পুনরাবৃত্তি এবং গতিশীল স্ট্রিংয়ের মানগুলিতে আবদ্ধ।

এইভাবে নির্দেশিকাটি কীভাবে ব্যবহার করবেন:

<form name="myFormName">
  <nested directives of many levels>
    <your table here>
    <perhaps a td here>
    ex: <input ng-repeat=(index, variable) in variables" type="text"
               my-name="{{ variable.name + '/' + 'myFormName' }}"
               ng-model="variable.name" required />
    ex: <select ng-model="variable.name" ng-options="label in label in {{ variable.options }}"
                my-name="{{ variable.name + index + '/' + 'myFormName' }}"
        </select>
</form>

দ্রষ্টব্য: আপনি যদি স্ট্রিং সংমিশ্রণে যুক্ত করতে পারেন এবং সূচীটি করতে পারেন যদি আপনাকে সম্ভবত ইনপুটগুলির একটি টেবিলটি সিরিয়ালকরণ করতে হয়; যা আমি করলাম

app.directive('myName', function(){

  var myNameError = "myName directive error: "

  return {
    restrict:'A', // Declares an Attributes Directive.
    require: 'ngModel', // ngModelController.

    link: function( scope, elem, attrs, ngModel ){
      if( !ngModel ){ return } // no ngModel exists for this element

      // check myName input for proper formatting ex. something/something
      checkInputFormat(attrs);

      var inputName = attrs.myName.match('^\\w+').pop(); // match upto '/'
      assignInputNameToInputModel(inputName, ngModel);

      var formName = attrs.myName.match('\\w+$').pop(); // match after '/'
      findForm(formName, ngModel, scope);
    } // end link
  } // end return

  function checkInputFormat(attrs){
    if( !/\w\/\w/.test(attrs.rsName )){
      throw myNameError + "Formatting should be \"inputName/formName\" but is " + attrs.rsName
    }
  }

  function assignInputNameToInputModel(inputName, ngModel){
    ngModel.$name = inputName
  }

  function addInputNameToForm(formName, ngModel, scope){
    scope[formName][ngModel.$name] = ngModel; return
  }

  function findForm(formName, ngModel, scope){
    if( !scope ){ // ran out of scope before finding scope[formName]
      throw myNameError + "<Form> element named " + formName + " could not be found."
    }

    if( formName in scope){ // found scope[formName]
      addInputNameToForm(formName, ngModel, scope)
      return
    }
    findForm(formName, ngModel, scope.$parent) // recursively search through $parent scopes
  }
});

এটি এমন অনেকগুলি পরিস্থিতিতে পরিচালনা করবে যেখানে আপনি কেবল ফর্মটি কোথায় থাকবে তা জানেন না। অথবা সম্ভবত আপনি ফর্মগুলি নেস্ট করেছেন, তবে কোনও কারণে আপনি এই ইনপুটটির নামটি দুটি ফর্মের সাথে সংযুক্ত করতে চান? ঠিক আছে, আপনি যে ফর্মটির সাথে ইনপুট নামটি সংযুক্ত করতে চান তা কেবল পাস করুন।

আমি যা চেয়েছিলাম তা হ'ল ইনপুটগুলিতে ডায়নামিক মান নির্ধারণের একটি উপায় যা আমি কখনই জানতে পারি না এবং তারপরে কেবল $ স্কোপ.মাইফর্মনেম $ কল করুন।

আপনি নিজের ইচ্ছে মতো যে কোনও কিছু যুক্ত করতে পারেন: আরও সারণী আরও ফর্ম ইনপুট, নেস্টেড ফর্মগুলি, আপনি যা চান তাই করুন। আপনি যে ফর্মের নামটি বৈধ করতে চান তার কেবল পাস করুন। তারপরে ফর্মের উপর জমা দিন কিনা জিজ্ঞাসা করুন y সুযোগ yআপনার নাম। বৈধ


0

এটি ফর্মের বৈধতায় পৃথক হয়ে উঠে এনজি-রিপিটে নামটি পাবে।

<td>
    <input ng-model="r.QTY" class="span1" name="{{'QTY' + $index}}" ng-pattern="/^[\d]*\.?[\d]*$/" required/>
</td>

তবে এটির বৈধতা বার্তায় সন্ধান করতে আমার সমস্যা হয়েছিল তাই অবজেক্ট কী হিসাবে কোনও ভেরিয়েবল সমাধান করার জন্য আমাকে একটি এনজি-থিম ব্যবহার করতে হয়েছিল।

<td>
    <input ng-model="r.QTY" class="span1" ng-init="name = 'QTY' + $index" name="{{name}}" ng-pattern="/^[\d]*\.?[\d]*$/" required/>
    <span class="alert-error" ng-show="form[name].$error.pattern"><strong>Requires a number.</strong></span>
    <span class="alert-error" ng-show="form[name].$error.required"><strong>*Required</strong></span> 


0

এখানে আমি এটি কীভাবে করি তার একটি উদাহরণ, আমি জানি না এটি সেরা সমাধান কিনা তবে পুরোপুরি কার্যকরভাবে কাজ করে।

প্রথম, এইচটিএমএলে কোড। এনজি-ক্লাসের দিকে তাকান, এটি হ'ল ইয়ারের ফাংশনটি কল করছে। ইনপুটটির নাম ঘোষণার দিকেও নজর দিন। আমি বিভিন্ন ইনপুট নাম তৈরি করতে $ সূচকটি ব্যবহার করি।

<div data-ng-repeat="tipo in currentObject.Tipo"
    ng-class="{'has-error': hasError(planForm, 'TipoM', 'required', $index) || hasError(planForm, 'TipoM', 'maxlength', $index)}">
    <input ng-model="tipo.Nombre" maxlength="100" required
        name="{{'TipoM' + $index}}"/>

এবং এখন, এখানে hasr এরর ফাংশনটি রয়েছে:

$scope.hasError = function (form, elementName, errorType, index) {
           if (form == undefined
               || elementName == undefined
               || errorType == undefined
               || index == undefined)
               return false;

           var element = form[elementName + index];
           return (element != null && element.$error[errorType] && element.$touched);
       };

0

মূল প্রশ্নে আমার প্রয়োজনীয়তাগুলির তুলনায় আমার প্রয়োজনীয়তা কিছুটা আলাদা ছিল তবে আশা করি আমি যে কাউকে আমার যে সমস্যাটি দিয়েছিলাম সেই সমস্যার মধ্য দিয়ে যাচ্ছি ..

স্কোপ ভেরিয়েবলের ভিত্তিতে যদি ক্ষেত্রের প্রয়োজন হয় বা না হয় তার জন্য আমাকে সংজ্ঞা দিতে হয়েছিল .. সুতরাং আমি মূলত সেট করতে হয়েছিল ng-required="myScopeVariable"(যা একটি বুলিয়ান ভেরিয়েবল)।

<div class="align-left" ng-repeat="schema in schemas">
    <input type="text" ng-required="schema.Required" />
</div>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.