ইনপুলার বৈধতা ব্যর্থ হলে অ্যাংুলারজগুলি ফর্ম জমা দিতে বাধা দেয়

Question

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

<form name="loginform" novalidate ng-submit="login.submit()" class="css-form">
    <fieldset>

        <div class="control-group input-prepend">
            <span class="add-on"><i class="icon-user"></i></span>
            <input type="text" ng-model="login.username" name="username" required ng-minlength="3" placeholder="username" />
        </div>

        <div class="control-group input-prepend">
            <span class="add-on"><i class="icon-lock"></i></span>
            <input type="password" ng-model="login.password" name="password" required ng-minlength="3" placeholder="" />
        </div>

        <div class="control-group">
            <input class="btn" type="submit" value="Log in">
        </div>

    </fieldset>
</form>

এবং নিয়ামক:

var controller = function($scope) {

    $scope.login = {
        submit: function() {

            Console.info($scope.login.username + ' ' + $scope.login.password);
        }
    }

};

সমস্যাটি হ'ল login.submitইনপুটটি বৈধ না হলেও ফাংশনটি কল করা হবে। এই আচরণ রোধ করা সম্ভব?

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

Comments

stackoverflow.com/questions/18516001/…

— বিকাশকারী

আমরা কি ফর্ম ট্যাগ ছাড়াই এটি ব্যবহার করতে পারি এবং এখনও ফর্ম.অনুষ্ঠানিকভাবে এনজি-ক্লিকে কাজ করবে!

— রিজওয়ান প্যাটেল

Answer 1

আপনি করতে পারেন:

<form name="loginform" novalidate ng-submit="loginform.$valid && login.submit()">

নিয়ামক চেকের প্রয়োজন নেই।

Comments

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। নিয়ামকটিতে কোনও কিছু পরীক্ষা করার দরকার নেই

— হাওি

আমি "নিয়ামক চেকের প্রয়োজন নেই" এর সাথে একমত নই। কী কী যদি আমরা অতিরিক্ত বৈধতা যাচাই করে জমা ফাংশনে ঘটে।

— স্লেটারকোডস

নির্দেশিকায় অতিরিক্ত বৈধতা সম্পাদন করুন। $ SetValidity সহ বৈধতা আপডেট করুন।

— টিএমবি

@ b1tsh1ft বৈধতার বর্তমান অবস্থা সর্বদা জমা দেওয়ার আগে সন্ধানের চেয়ে জানা থাকা বাঞ্ছনীয়। এটাই কৌণিকের বৈধতার পুরো বিন্দু। সুযোগটি যখন জানে না তখন আপনার কোনও অবৈধ অবস্থার কোনও ভিজ্যুয়াল ইঙ্গিত থাকতে পারে না।

— কেভিন বিয়াল

আমি এই পদ্ধতির চেষ্টা করেছি, তবে মনে হচ্ছে এটি উভয়কেই মূল্যায়ন করে (অর্থাত্ &&আমি জমা দেওয়ার অংশ হিসাবে মানটি পাস করার চেষ্টা করার পরে এটি বুলিয়ান শর্ট সার্কিট করে না এবং মানটি নিজেই "মিথ্যা" নিশ্চিত হয়েছে

— আর্কিমিডিস ট্রাজানো

Answer 2

জমা বোতামটি এতে পরিবর্তন করুন:

<button type="submit" ng-disabled="loginform.$invalid">Login</button>

Comments

দুর্দান্ত উত্তর। তুমি রক!

— হর্ষা.ওয়াসওয়ানি

ইনপুট ক্ষেত্রটির ফোকাস থাকার সময় আপনি এন্টার টিপলে আপনি এখনও ফর্মটি জমা দিতে পারেন!

— ফেবসনেট

@ রেড: উপরে মন্তব্য দেখুন।

— আন্দ্রে রিনিয়া

বোতামটি অক্ষম করা সাধারণত এটি সমাধানের সর্বোত্তম উপায়, ওপি যা বলেছিল তা নয়।

— ডাউনহ্যান্ড

এই কৌশলটি একত্রিত করে ব্যবহারকারীর জন্য ভিজ্যুয়াল প্রতিক্রিয়া সরবরাহ করার জন্য @ যশুয়া উত্তর ফর্ম জমা দেওয়া রোধ করার জন্য উপযুক্ত is ধন্যবাদ!

— tkarls

Answer 3

সুতরাং থিপ্পো থেকে প্রস্তাবিত উত্তরটি আমার পক্ষে কার্যকর হয়নি, পরিবর্তে আমি ফাংশনটির পরামিতি হিসাবে ফর্মটি প্রেরণ করে শেষ করেছি:

<form name="loginform" novalidate ng-submit="login.submit(loginForm)" class="css-form">

এটি নিয়ামক পদ্ধতিতে ফর্মটি উপলব্ধ করে:

$scope.login = {
    submit : function(form) {
        if(form.$valid)....
    }

Comments

আমারো একই ইস্যু ছিল. যদিও আপনার পদ্ধতি ব্যবহার করে কাজ করেছে।

— পান্ডা

এটি গৃহীত উত্তরের চেয়ে কিছুটা ভাল কারণ ফর্মটি $ বৈধ চেকটি এইচটিএমএলে নয় জেএসে করা হয়।

— cellepo

তবে, আমি মনে করি না যে ফাংশন জমা দেওয়ার জন্য আপনাকে লগইনফর্ম পাস করার দরকার আছে: আমি মনে করি $ সুযোগ.লগিনফর্মটি জেএসে পাওয়া উচিত (কমপক্ষে এটি আমার জন্য ছিল), যাতে আপনি ফর্মটি প্রতিস্থাপন করতে পারেন $ স্কোপ.লগিনফর্ম সহ বৈধ $ । $ বৈধ।

— cellepo

Answer 4

আপনার ফর্মগুলি একটি অবজেক্ট হিসাবে স্বয়ংক্রিয়ভাবে $ স্কোপে রাখা হয়। এটি মাধ্যমে অ্যাক্সেস করা যেতে পারে$scope[formName]

নীচে এমন একটি উদাহরণ দেওয়া আছে যা আপনার মূল সেটআপের সাথে এবং এনজি-সাবমিশনে প্যারামিটার হিসাবে ফর্মটি পাস না করেই কাজ করবে।

var controller = function($scope) {

    $scope.login = {
        submit: function() {
            if($scope.loginform.$invalid) return false;

        }
    }

};

কার্যকারী উদাহরণ: http://plnkr.co/edit/BEWnrP?p= পূর্বরূপ

Comments

আপনি যদি $ সুযোগের পরিবর্তে "নিয়ন্ত্রণকারী হিসাবে" স্বরলিপি ব্যবহার করেন তবে আপনি কীভাবে ফর্মটি অ্যাক্সেস করবেন?

— মাসিম্প্লো

@masimakopoulos: আপনি কেবল ব্যবহার করতে পারেন if(this.loginform.$invalid).. পরিবর্তে তবে এইচটিএমএলে আপনাকে ফর্মটির নাম দিতে হবে <form name="ctrl.loginform" ..। এবং ধরে নিচ্ছে যে <div ng-controller="controller as ctrl"..আপনি নিজের নিয়ামক হিসাবে সিনট্যাক্স ব্যবহার করছেন । ধন্যবাদ @ জোশকারল

— বার্ট

Answer 5

এইচটিএমএল:

<div class="control-group">
    <input class="btn" type="submit" value="Log in" ng-click="login.onSubmit($event)">
</div>

আপনার নিয়ামক মধ্যে:

$scope.login = {
    onSubmit: function(event) {
        if (dataIsntValid) {
            displayErrors();
            event.preventDefault();
        }
        else {
            submitData();
        }
    }
}

Comments

অনস্মিট পদ্ধতিতে চেক করা কি সত্যই প্রয়োজন? এর অর্থ হ'ল আপনাকে যাচাই করতে হবে যে ইনপুটটি মার্কআপে (কৌণিক মাধ্যমে) এবং জেএস কোড উভয় ক্ষেত্রেই সমস্ত মানদণ্ড পূরণ করে। আমার মতে কৌণিককে ইনপুটটি অবৈধ হলে অনসামিত কল করা উচিত নয়। দেখতে benlesh.com/2012/11/angular-js-form-validation.html বলার অপেক্ষা রাখে না "NG-জমা বলা যায় না যতক্ষণ না সমগ্র ফর্ম $ বৈধ"

— Runar Halse

ফর্মটি বৈধ হলে জমা দেওয়ার অনুমতি না দেওয়ার জন্য আপনি বোতামটি অক্ষমও করতে পারেন। আপনি এনজি-ফর্মটিও ব্যবহার করতে পারেন। যদি কৌণিক ফর্ম বৈধতা পরিচালনা করে না তবে event.preventDefault()ফর্ম জমা দেওয়া বন্ধ করার উপায় stop

— দি হিপ্পো

@ রুনারহালস চেক করা সত্যই প্রয়োজন। আমি আপনার সাথে একমত যে এটি এমন হওয়া উচিত নয়। আপনি যে উদাহরণটি সংযুক্ত করেছেন তাতে অনসুমিত পদ্ধতিটি না ডাকা কারণ, কারণ সেই উদাহরণটির কোনও অফলিডেট সেট নেই। ব্রাউজারটি কৌণিক নয়, ঘটনাগুলি বাড়াতে বাধা দিচ্ছে। এখানে তার উদাহরণ W / nobalidate: plnkr.co/edit/R0C8XA?p= পূর্বরূপ দেখুন । জমা দেওয়া ফর্ম লক্ষ্য করুন।

— ডেভিডেমডেম

ঠিক আমি যা

— খুঁজছিলাম

Answer 6

যদিও ওপিএস প্রশ্নের সরাসরি সমাধান নয়, যদি আপনার ফর্মটি একটি ng-appপ্রসঙ্গে থাকে তবে আপনি কৌনিকটি এটিকে পুরোপুরি উপেক্ষা করতে চান, আপনি ngNonBindableনির্দেশটি ব্যবহার করে এটি স্পষ্টভাবে করতে পারেন :

<form ng-non-bindable>
  ...
</form>

Answer 7

কেবল উপরের উত্তরগুলিতে যুক্ত করতে,

নীচে প্রদর্শিত হিসাবে আমার কাছে নিয়মিত 2 টি বোতাম ছিল। (কোথাও কোন ধরণের = "জমা" নয়)

<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>
<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>

আমি যতই চেষ্টা করেছি না কেন, একবার ফর্মটি বৈধ হওয়ার পরে এন্টার টিপে , পুরো ফর্মটি সাফ করে "ক্লিয়ার ফর্ম" বোতামটি কল করা হয়েছিল।

কাজের মতো

আমাকে একটি ডামি সাবমিট বাটন যুক্ত করতে হয়েছিল যা অক্ষম এবং লুকানো ছিল। এবং এই ডামি বোতামটি নীচে প্রদর্শিত সমস্ত অন্যান্য বোতামের উপরে থাকতে হবে ।

<button type="submit" ng-hide="true" ng-disabled="true">Dummy</button>

<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>

<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>

ঠিক আছে, আমার উদ্দেশ্য কখনও এন্টার এ জমা দেওয়ার ছিল না, সুতরাং উপরের প্রদত্ত হ্যাকটি ঠিক কাজ করে।

Comments

আপনি নিজের ফর্মটি থেকে এনজিট-জমা দেওয়ার বৈশিষ্ট্যটি অপসারণ করে প্রেস এন্টারে জমা দেওয়া বন্ধ করতে পারেন

— কেয়ারান

Answer 8

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

ng-click="form.$invalid ? alert('Please correct the form') : saveTask(task)"

Comments

ইনপুট ক্ষেত্রটির ফোকাস থাকার সময় আপনি এন্টার টিপলে আপনি এখনও ফর্মটি জমা দিতে পারেন!

— ইয়েভেগেনি আফানসিয়েভ

Answer 9

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

app.directive('ngValidate', function() {
  return function(scope, element, attrs) {
    if (!element.is('form'))
        throw new Error("ng-validate must be set on a form elment!");

    element.bind("submit", function(event) {
        if (!scope.$eval(attrs.ngValidate, {'$event': event}))
            event.preventDefault();
        if (!scope.$$phase)
            scope.$digest();            
    });
  };
});

আপনার এইচটিএমএলে:

<form name="offering" method="post" action="offer" ng-validate="<boolean expression">