অ্যাঙ্গুলারজেএস-এর সাথে ফর্মটি অবৈধ হলে জমা দেওয়ার বোতামটি অক্ষম করুন

Question

আমার মতো আমার ফর্মটি রয়েছে:

<form name="myForm">
    <input name="myText" type="text" ng-model="mytext" required />
    <button disabled="{{ myForm.$invalid }}">Save</button>
</form>

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

Comments

angulartutorial.net/2016/04/…

— প্রশোভ

Answer 1

আপনাকে নিজের ফর্মের নাম ব্যবহার করতে হবে, পাশাপাশি এনজিও-অক্ষম করা দরকার: এখানে প্লামকারের একটি ডেমো রয়েছে

<form name="myForm">
    <input name="myText" type="text" ng-model="mytext" required />
    <button ng-disabled="myForm.$invalid">Save</button>
</form>

Comments

দুঃখিত, আমি এখন এটি ব্যবহার। তবুও, এটি এখনও অক্ষম করা আছে এমনকি যখন পাঠ্যবাক্সটিতে পাঠ্য থাকে

— আলি

+1 কাকতালীয়ভাবে, আমি কেবল আপনার এই দুর্দান্ত পোস্টটি পড়ছিলাম: benlesh.com/2012/11/angular-js-for-ificationsation.html

— বেন

আমার যদি ফর্ম না থাকে? আমি কি ডিভ এলিমেন্টে এটি করতে পারি?

— VsMaX

টেকনিক্যালি @MichaelCwienczek, আপনি একটি div ট্যাগে ng-ফর্ম যুক্ত করতে পারেন: <div ng-form="myForm"> ... stuff here .. </div>। যদিও, আপনি যদি বোতাম ধাক্কা উপর ইনপুট থেকে একটি মান, জমা দেওয়ার করছি, আমি অত্যন্ত একটি ব্যবহার করার প্রস্তাব <form/>ট্যাগ, অন্য কোন কারণ যদি তুলনায় এটি আঘাত একটি ব্যবহারকারী দেয় [Enter] এবং ফর্ম জমা দিতে হবে। তবে এটি অ্যাক্সেসযোগ্যতার উদ্বেগের মতো জিনিসের কারণে এটি আরও ভাল অনুশীলন গঠন করে।

— বেন লেশ

@ বেনল্যাশ, যদি সাবমিট বাটনটি আমার ফর্মের অভ্যন্তরে না থাকে এবং ফর্মটি অবৈধ অবস্থায় থাকে তবে আমাকে এটি অক্ষম করতে হবে।

— গ্রিন উইজার্ড

Answer 2

এই উত্তর যুক্ত করতে। আমি সবেমাত্র জানতে পেরেছি যে আপনি যদি নিজের ফর্মের নামটিতে একটি হাইফেন ব্যবহার করেন (কৌনিক 1.3):

সুতরাং এটি কাজ করবে না :

<form name="my-form">
    <input name="myText" type="text" ng-model="mytext" required />
    <button ng-disabled="my-form.$invalid">Save</button>
</form>

Comments

হ্যাঁ, যে কোনও AngularJS ফর্ম বৈধতার জন্য ফর্মের নাম উটের ক্ষেত্রে হওয়া উচিত।

— ডুবিলা

থাম্বের নিয়ম হিসাবে, সমস্ত জেএস এক্সপ্রেশন মত উটকেলেস আকারে অবজেক্টগুলিকে স্বীকৃতি দেবে, যখন

— ড্যাশটি

সুতরাং, যদি ফর্মটি কোনও ফর্মসেটের সদস্য হয়, এবং তাই এর মধ্যে একটি নাম / ডাবল নাম রাখা প্রয়োজন (যেমন "আমার_ফর্মसेट_নাম -0")?

— ট্রুবলিফোন

উপরের উদাহরণে, আমি myForm.$invalidএখনও কাজ করা উচিত বিশ্বাস করি , তাই আপনার ক্ষেত্রে, আমি my_formset_name0.$invalidকাজ করা উচিত বলে মনে করি ।

— wvdz

Answer 3

নির্বাচিত প্রতিক্রিয়াটি সঠিক, তবে আমার মতো কারও কাছে সার্ভার-সাইডে অনুরোধ প্রেরণের সাথে অ্যাসিঙ্ক বৈধকরণের সমস্যা থাকতে পারে - প্রদত্ত অনুরোধ প্রক্রিয়াকরণের সময় বোতামটি অক্ষম করা হবে না, সুতরাং বোতামটি জ্বলজ্বল করবে যা ব্যবহারকারীদের জন্য বেশ অদ্ভুত দেখাচ্ছে।

এটি বাতিল করার জন্য, আপনাকে কেবল form ফর্মটির মুলতুবি থাকা অবস্থায় পরিচালনা করতে হবে:

<form name="myForm">
  <input name="myText" type="text" ng-model="mytext" required />
  <button ng-disabled="myForm.$invalid || myForm.$pending">Save</button>
</form>

Comments

অ্যাসিঙ্ক বৈধতা সমাধানের জন্য আপনাকে অনেক ধন্যবাদ!

— মার্টিন ব্র্যান্ডল

আপনার কেবল !myForm.$validসেই অ্যাসিঙ্ক মুলতুবি সমস্যাগুলি পরিচালনা করে les itnext.io/

— अवैध-

Answer 4

আপনি যদি প্রতিক্রিয়াশীল ফর্মগুলি ব্যবহার করেন তবে আপনি এটি ব্যবহার করতে পারেন:

<button [disabled]="!contactForm.valid" type="submit" class="btn btn-lg btn primary" (click)="printSomething()">Submit</button>

Comments

যদিও এটি "কৌণিক" জন্য বৈধ পরামর্শ, এই উত্তরটি "অ্যাঙ্গুলারজেএস" এর জন্য অবৈধ। যথা, (click)এবং [disabled]বৈধ AngularJS কোড নয়, বা প্রতিক্রিয়াশীল ফর্মগুলি AngularJS কাঠামোর একটি অংশ নয়। "আজ এবং আগামীকালকের কৌণিকের জন্য কৌণিক নাম। কৌণিকের সমস্ত v1.x সংস্করণের নাম কৌণিক জেএস

— dapperdan1985

Answer 5

সমস্ত বাধ্যতামূলক ক্ষেত্র পূরণ না হওয়া পর্যন্ত আমরা একটি সাধারণ নির্দেশিকা তৈরি করতে এবং বোতামটি অক্ষম করতে পারি।

angular.module('sampleapp').directive('disableBtn',
function() {
 return {
  restrict : 'A',
  link : function(scope, element, attrs) {
   var $el = $(element);
   var submitBtn = $el.find('button[type="submit"]');
   var _name = attrs.name;
   scope.$watch(_name + '.$valid', function(val) {
    if (val) {
     submitBtn.removeAttr('disabled');
    } else {
     submitBtn.attr('disabled', 'disabled');
    }
   });
  }
 };
}
);

আরো তথ্যের জন্য এখানে ক্লিক করুন

Comments

আপনার সমাধানের পদ্ধতিটি আমার জন্য সামান্য ঝাঁকুনির সাথে কাজ করে। ধন্যবাদ

— তটিপাকা

যখন ng-disabledকৌণিক 1.x এবং [disabled]কৌনিক 2 | 4.x এ দেশীয় দিকনির্দেশ রয়েছে যা এর চেয়ে আরও ভাল পরীক্ষা করা হয় আপনি কেন এটি করবেন? দ্বিতীয়ত, কেন এমন নির্দেশিকা রয়েছে যা নীড়যুক্ত বোতামটি অক্ষম করার জন্য কোনও ফর্মের মধ্যে রয়েছে it's একটি অসুস্থ চিন্তার সমাধান আইএমও।

— ডেভিড বার্কার

উপরে একটি নমুনা নির্দেশিকা রয়েছে, মূল নেস্টেড চেক বাক্স ইত্যাদির মতো অনেকগুলি দৃশ্যপট রয়েছে এবং আমি প্রতিটি ফর্ম যুক্ত করে আমার এইচটিএমএল কোডটি নোংরা করতে চাই না, পরিবর্তে এই নির্দেশিকাটি সমস্ত জিনিস যত্ন নেবে।

— প্রশোভ

Answer 6

<form name="myForm">
        <input name="myText" type="text" ng-model="mytext" required/>
        <button ng-disabled="myForm.$pristine|| myForm.$invalid">Save</button>
</form>

আপনি যদি আরও কিছু কঠোর হতে চান