ব্যবহারকারী কোনও ক্ষেত্র রেখে যাওয়ার পরে ক্ষেত্রগুলিকে বৈধ করুন


92

AngularJS- এর সাহায্যে আমি ব্যবহারকারীর ক্ষেত্রে ক্ষেত্র প্রবেশ করেছে কিনা তা সনাক্ত করতে ng-pristineবা ng-dirtyসনাক্ত করতে পারি । তবে, ব্যবহারকারী ক্ষেত্রের ক্ষেত্রটি ছেড়ে যাওয়ার পরে কেবল ক্লায়েন্ট-সাইড বৈধতা করতে চাই। এটি কারণ যখন কোনও ব্যবহারকারী ই-মেইল বা ফোনের মতো কোনও ক্ষেত্রে প্রবেশ করে, তারা তাদের সম্পূর্ণ ই-মেইল টাইপ না করা অবধি ততক্ষণ একটি ত্রুটি নিক্ষেপ করবে এবং এটি কোনও অনুকূল ব্যবহারকারীর অভিজ্ঞতা নয়।

উদাহরণ


হালনাগাদ:

কৌনিক এখন অসম্পূর্ণ ইভেন্ট সহ জাহাজগুলি: https://docs.angularjs.org/api/ng/directive/ngBlur


4
আমি অনুমান করি যে এটি এমন কিছু যা কৌণিক বিষয়গুলির সমর্থন করা উচিত ছিল ...
সিএসজি

হতে পারে. বিল্ট ইন ফর্ম যাচাইকরণটি বেশ ভালভাবে কাজ করে যা আমি জানি না যে আমি এটি বিল্ট ইন চাই। অর্থাত্ একটি নম্বর ক্ষেত্রের মধ্যে, আমি চাই যদি ব্যবহারকারী চিঠি লিখতে শুরু করে তবেই ফর্মটি অবিলম্বে বাতিল হয়ে যায়।
এমক্র্যানস্টন 18

11
অস্পষ্টতার উপর বৈধতা 15 বছর থেকে সাধারণ ...
অলিভভিভি

উত্তর:


75

কৌণিক 1.3 এর এখন এনজি-মডেল-বিকল্প রয়েছে এবং আপনি বিকল্পটি { 'updateOn': 'blur'}উদাহরণস্বরূপ সেট করতে পারেন এবং আপনি এমনকি ডাবনও করতে পারেন, যখন ব্যবহারটি হয় খুব দ্রুত টাইপ করা হয়, বা আপনি কয়েকটি ব্যয়বহুল ডিওএম ক্রিয়াকলাপ সংরক্ষণ করতে চান (যেমন মডেল লেখার মতো) একাধিক ডিওএম জায়গাগুলিতে এবং আপনি চান না যে প্রতি কিতে ডাইজেস্ট চক্রটি ঘটবে)

https://docs.angularjs.org/guide/forms#custom-triggers এবং https://docs.angularjs.org/guide/forms#non-imedia-debounced-model-updates

ডিফল্টরূপে, সামগ্রীতে যে কোনও পরিবর্তন একটি মডেল আপডেট এবং ফর্ম বৈধকরণকে ট্রিগার করবে। আপনি কেবলমাত্র ইভেন্টের নির্দিষ্ট তালিকাতে বাঁধতে ngModelOptions নির্দেশিকা ব্যবহার করে এই আচরণটি ওভাররাইড করতে পারেন। অর্থনীতির মডেল-বিকল্পগুলি = "{আপডেটঅন: 'ব্লার'}" নিয়ন্ত্রণ নিয়ন্ত্রণ ফোকাস হারানোর পরে আপডেট ও বৈধতা দেবে। একটি স্থান সীমিত তালিকা ব্যবহার করে আপনি বেশ কয়েকটি ইভেন্ট সেট করতে পারেন। আইজি এনজি-মডেল-বিকল্পগুলি = "{আপডেটঅন: 'মোসডাউন ব্লার'}"

এবং আত্মপ্রকাশ

আপনি ngModelOptions নির্দেশের সাহায্যে ডিবাউন কীটি ব্যবহার করে মডেল আপডেট / বৈধতা বিলম্ব করতে পারেন। এই বিলম্বটি পার্সার, বৈধকরণকারী এবং মডেল পতাকাগুলিতে valid নোংরা বা $ মূলের মতো প্রযোজ্য।

আইজি এনজি-মডেল-অপশনগুলি = "{আত্মপ্রকাশ: 500।" মডেল আপডেট এবং ফর্মের বৈধতা ট্রিগার করার আগে শেষ সামগ্রী পরিবর্তনের পরে অর্ধেক সেকেন্ড অপেক্ষা করবে for


4
বেশিরভাগ ক্ষেত্রে এটি সমস্যার সমাধান করে না কারণ ng-changeব্যবহারকারী সম্ভবত ক্ষেত্র ছেড়ে যাওয়ার আগে আপনি সম্ভবত ইভেন্টগুলি পেতে চান । উদাহরণস্বরূপ, আমার ক্ষেত্রে আমি ইনপুট ক্ষেত্রটি বৈধ হওয়ার সাথে সাথেই আমার API থেকে নতুন ডেটার জন্য অনুরোধ করছি, তবে আমি কোনও ত্রুটি বার্তাটি অবৈধ হওয়ার সাথে সাথে দেখাতে চাই না - এটি কেবল তখনই আমি এটি করতে চাই অবৈধ এবং অস্পষ্ট ঘটনা ঘটেছে।
টম

@ টম আমি পরীক্ষা করছি 1.3.0 rc-3এবং এটি আগুন changeনা হওয়া পর্যন্ত এটি blurপরীক্ষা করে দেখুন: plnkr.co/edit/RivVU3r7xfHO1hUybqMu?p= পূর্বরূপ
গিল বেটস

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

92

সংস্করণ ১.৩.০ থেকে এটি সহজেই করা যায় $touched, যা ব্যবহারকারী ক্ষেত্র ছেড়ে যাওয়ার পরে সত্য।

<p ng-show="form.field.$touched && form.field.$invalid">Error</p>

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController


4
এটি কি প্রতিটি কী-আপের পরে বৈধতা কার্যকর করে না? ওপি জানিয়েছে যে ব্যবহারকারী মাঠ ছাড়ার পরেই তিনি বৈধতা চান।
comecme

@ আয়কমে হ্যাঁ এটি হ'ল, ডিফল্ট এনজি-মডেল-বিকল্পগুলির updateOn: 'default'অর্থ ইনপুট, কী আপ এবং নির্বাচনের জন্য, পরিবর্তনের জন্য
পোর্শার

4
এখানে বড় ত্রুটি হ'ল আপনি যদি মাঠে ফিরে আসেন তবে আপনার একই বৈধতার অভিজ্ঞতা থাকবে না। আপনি প্রথম স্কোয়ারে ফিরে এসেছেন, যেখানে এটি প্রতিটি কীস্ট্রোককে বৈধতা দেয়, কারণ এটি ইতিমধ্যে ছোঁয়াতে সেট করা হয়েছে। আমি বিস্মিত এই অনেক উপকার পেয়েছি।
দুদেওয়াদ

4
@ দেউদওয়াদ এটি সঠিক, তবে আমি মনে করি এটি পছন্দসই আচরণটি ইউএক্স বুদ্ধিমান - আপনি যদি কোনও অবৈধ ক্ষেত্রে ফিরে আসেন তবে ত্রুটি বার্তাটি মান বৈধ না হওয়া পর্যন্ত অব্যাহত থাকবে, আপনি প্রথম অক্ষরটি টাইপ না করা পর্যন্ত নয়।
Danbars

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

32

@Jlmcdonald এর পরামর্শে এটি প্রসারিত করে সমাধান করেছি। আমি একটি নির্দেশ তৈরি করেছি যা স্বয়ংক্রিয়ভাবে সমস্ত ইনপুট এবং নির্বাচিত উপাদানগুলিতে প্রয়োগ করা হবে:

var blurFocusDirective = function () {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function (scope, elm, attr, ctrl) {
            if (!ctrl) {
                return;
            }

            elm.on('focus', function () {
                elm.addClass('has-focus');

                scope.$apply(function () {
                    ctrl.hasFocus = true;
                });
            });

            elm.on('blur', function () {
                elm.removeClass('has-focus');
                elm.addClass('has-visited');

                scope.$apply(function () {
                    ctrl.hasFocus = false;
                    ctrl.hasVisited = true;
                });
            });

            elm.closest('form').on('submit', function () {
                elm.addClass('has-visited');

                scope.$apply(function () {
                    ctrl.hasFocus = false;
                    ctrl.hasVisited = true;
                });
            });

        }
    };
};

app.directive('input', blurFocusDirective);
app.directive('select', blurFocusDirective);

ব্যবহারকারী বিভিন্ন উপাদানগুলিকে ফোকাস / ভিজিট করায় এটি বিভিন্ন উপাদানগুলিতে ক্লাস has-focusএবং যোগ করবে has-visited। তারপরে বৈধতা ত্রুটিগুলি দেখানোর জন্য আপনি এই ক্লাসগুলি আপনার সিএসএস বিধিগুলিতে যুক্ত করতে পারেন:

input.has-visited.ng-invalid:not(.has-focus) {
    background-color: #ffeeee;   
}

এটি উপাদানগুলিতে এখনও অবৈধ বৈশিষ্ট্যগুলি ইত্যাদিতে ভালভাবে কাজ করে তবে CSS ব্যবহারকারীকে আরও ভাল অভিজ্ঞতা দেওয়ার জন্য ব্যবহার করা যেতে পারে।


4
কেবল 'এনজিমোডেল' এর পরিবর্তে '? এনজিমোডেল' কেন প্রয়োজন? আমি এনজিএমডেল থাকা দরকার বুঝতে পারি, তবে প্রশ্ন চিহ্ন কেন?
নরেম্যাক

4
ধারণার জন্য ধন্যবাদ। এটিতে উল্লেখ করা উচিত যে এটির জন্য jQuery প্রয়োজন (আমার মনে হয় - jql তে একটি ক্লোসেট () দেখতে পেল না)।
iandotkelly

4
সমস্ত <ইনপুট> উপাদান এনজিমোডেল দ্বারা সমর্থিত নয় (যেমন ইনপুট টাইপ = জমা দিন)। দ্য ? এটি সমর্থন করে এমন উপাদানগুলিতে কেবল এনজিমোডেল প্রয়োজন।
chmanie

4
সত্য কথা বলতে গেলে, আপনার পছন্দ মতো ইনপুট ফিল্ডের কৌনিক উপায় থেকে বিচ্যুত হওয়া উচিত নয় formName.inputName.$dirty। আমি formName.inputName.$focusedবৈধতার জন্য ক্লাসের নাম এবং অস্পষ্টতার জন্য বুলিয়ান ব্যবহার না করে অনুরূপ বুলিয়ান লেখার জন্য নির্দেশকে সম্পাদনা করার পরামর্শ দেব ।
টম

17

আমি বেশ সহজ সিএসএসের সাহায্যে এটি পরিচালনা করেছিলাম। এই প্রয়োজন যে ত্রুটি বার্তা ইনপুট তারা কহা ভাইবোন হতে, এবং তারা একটি বর্গ আছে error

:focus ~ .error {
    display:none;
}

এই দুটি প্রয়োজনীয়তা পূরণের পরে, এটি একটি কেন্দ্রীভূত ইনপুট ক্ষেত্র সম্পর্কিত কোনও ত্রুটি বার্তাটি গোপন করবে, এমন কিছু যা আমার মনে হয় যে কৌনিকত যেভাবেই করা উচিত। তদারকির মতো মনে হচ্ছে।


4
আহ! এটি যেতে একটি স্মার্ট উপায়। আমি এটি করতে জাভাস্ক্রিপ্ট লেখার চেয়ে বেশি পছন্দ করি।
ডেক

4
এই পদ্ধতির খারাপ দিকটি হ'ল কেউ যখন কোনও ত্রুটি সংশোধন করে ত্রুটিটি আর দেখা যায় না যা আদর্শ নয়। আদর্শ হ'ল ত্রুটি অস্পষ্ট হওয়া পর্যন্ত দেখাবে না তবে এটি সংশোধন না হওয়া পর্যন্ত অদৃশ্য হবে না।
ক্রিস নিকোলা

4

এটি কৌণিকের নতুন সংস্করণগুলিতে মান হিসাবে প্রয়োগ করা হবে বলে মনে হয়।

ক্লাস NG-অস্পৃষ্ট এবং NG-স্পর্শ করার আগে যথাক্রমে নির্ধারণ করা হয় এবং ব্যবহারকারী পর যাচাই উপাদান উপর ফোকাস হয়েছে।

সিএসএস

input.ng-touched.ng-invalid {
   border-color: red;
}

4

সংক্রান্ত @ lambinator এর সমাধান ... আমি angular.js 1.2.4 নিম্নলিখিত ত্রুটি পেয়ে ছিল:

ত্রুটি: [$ rootScope: inprog] gest ডাইজেস্ট ইতিমধ্যে চলছে in

আমি নিশ্চিত নই যে আমি কিছু ভুল করেছি বা এটি কৌণিক পরিবর্তনে যদি হয় তবে scope.$applyবিবৃতি অপসারণের ফলে সমস্যার সমাধান হয়েছে এবং শ্রেণি / রাজ্যগুলি এখনও আপডেট হচ্ছে।

আপনি যদি এই ত্রুটিটিও দেখতে পান তবে নিম্নলিখিত বিষয়গুলি চেষ্টা করে দেখুন:

var blurFocusDirective = function () {
  return {
    restrict: 'E',
    require: '?ngModel',
    link: function (scope, elm, attr, ctrl) {
      if (!ctrl) {
        return;
      }
      elm.on('focus', function () {
        elm.addClass('has-focus');
        ctrl.$hasFocus = true;
      });

      elm.on('blur', function () {
        elm.removeClass('has-focus');
        elm.addClass('has-visited');
        ctrl.$hasFocus = false;
        ctrl.$hasVisited = true;
      });

      elm.closest('form').on('submit', function () {
        elm.addClass('has-visited');

        scope.$apply(function () {
          ctrl.hasFocus = false;
          ctrl.hasVisited = true;
        });
      });
    }
  };
};
app.directive('input', blurFocusDirective);
app.directive('select', blurFocusDirective);

2

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

https://github.com/angular/angular.js/issues/1277

আপনি যদি সেই রাস্তাটিতে যেতে না চান তবে আপনার অন্য বিকল্পটি ক্ষেত্রটি $ ঘড়ির উপরে সেট আপ করা হবে the ক্ষেত্রটি পূরণ করার পরে আবার বৈধতাটি ট্রিগার করবে।


2

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

(উদাহরণ jQuery প্রয়োজন)

জাভাস্ক্রিপ্ট

module = angular.module('app.directives', []);
module.directive('lateValidateForm', function () {
    return {
        restrict: 'AC',
        link: function (scope, element, attrs) {
            $inputs = element.find('input, select, textarea');

            $inputs.on('blur', function () {
                $(this).addClass('has-visited');
            });

            element.on('submit', function () {
                $inputs.addClass('has-visited');
            });
        }
    };
});

সিএসএস

input.has-visited:not(:focus):required:invalid,
textarea.has-visited:not(:focus):required:invalid,
select.has-visited:not(:focus):required:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
}

এইচটিএমএল

<form late-validate-form name="userForm">
  <input type="email" name="email" required />
</form>

2

@নিকোলাস উত্তরের উপর ভিত্তি করে .. খাঁটি সিএসএসের কৌশলটি হওয়া উচিত, এটি কেবল অস্পষ্টতার উপর ত্রুটি বার্তা প্রদর্শন করবে

<input type="email" id="input-email" required
               placeholder="Email address" class="form-control" name="email"
               ng-model="userData.email">
        <p ng-show="form.email.$error.email" class="bg-danger">This is not a valid email.</p>

সিএসএস

.ng-invalid:focus ~ .bg-danger {
     display:none;
}

এটি ভাল, তবে ব্যবহারকারী ক্ষেত্রটিতে ফিরে ক্লিক করলে ত্রুটি বার্তাটি অদৃশ্য হয়ে যাবে, যা আদর্শ নয়।
বেনেট ম্যাকএলওই

2

এখানে এনজি-বার্তা (কৌনিক 1.3 এ উপলব্ধ) এবং একটি কাস্টম নির্দেশ ব্যবহার করে একটি উদাহরণ দেওয়া হয়েছে।

বৈধতা বার্তাটি প্রথমবারের জন্য ঝাপটায় প্রদর্শিত হবে যখন ব্যবহারকারীরা ইনপুট ক্ষেত্রটি ছেড়ে যায়, কিন্তু যখন সে মানটি সংশোধন করে, বৈধতা বার্তাটি তত্ক্ষণাত সরিয়ে ফেলা হয় (আর অস্পষ্ট নয়)।

জাভাস্ক্রিপ্ট

myApp.directive("validateOnBlur", [function() {
    var ddo = {
        restrict: "A",
        require: "ngModel",
        scope: {},
        link: function(scope, element, attrs, modelCtrl) {
            element.on('blur', function () {
                modelCtrl.$showValidationMessage = modelCtrl.$dirty;
                scope.$apply();
            });
        }
    };
    return ddo;
}]);

এইচটিএমএল

<form name="person">
    <input type="text" ng-model="item.firstName" name="firstName" 
        ng-minlength="3" ng-maxlength="20" validate-on-blur required />
    <div ng-show="person.firstName.$showValidationMessage" ng-messages="person.firstName.$error">
        <span ng-message="required">name is required</span>
        <span ng-message="minlength">name is too short</span>
        <span ng-message="maxlength">name is too long</span>
    </div>
</form>

পুনশ্চ. আপনার মডিউলে ngMessages ডাউনলোড এবং অন্তর্ভুক্ত করতে ভুলবেন না:

var myApp = angular.module('myApp', ['ngMessages']);

1

AngularJS 1.3 এ এনজি-মডেল-বিকল্পগুলি (এই লেখার মতো বিটা) {আপডেটঅন: 'ব্লার' support সমর্থন করার জন্য নথিভুক্ত করা হয়েছে} পূর্ববর্তী সংস্করণগুলির জন্য, নীচের মতো কিছু আমার জন্য কাজ করেছে:

myApp.directive('myForm', function() {
  return {
    require: 'form',
    link: function(scope, element, attrs, formController) {
      scope.validate = function(name) {
        formController[name].isInvalid
            = formController[name].$invalid;
      };
    }
  };
});

এর মতো একটি টেম্পলেট সহ:

<form name="myForm" novalidate="novalidate" data-my-form="">
<input type="email" name="eMail" required="required" ng-blur="validate('eMail')" />
<span ng-show="myForm.eMail.isInvalid">Please enter a valid e-mail address.</span>
<button type="submit">Submit Form</button>
</form>

1

মাঠের অবস্থাটি স্পর্শ করুন স্পর্শ করুন নীচের উদাহরণে যেমন দেখানো হয়েছে তেমনভাবে ক্ষেত্রটি স্পর্শ করা হয়েছে।

<div ng-show="formName.firstName.$touched && formName.firstName.$error.required">
    You must enter a value
</div>

0

আপনি এনজি-ক্লাস এবং সম্পর্কিত কন্ট্রোলারের সুযোগের ভিত্তিতে একটি সম্পত্তি হ্যা-ত্রুটি সিএসএস শ্রেণি (ধরে নিচ্ছেন বুটস্ট্র্যাপ ব্যবহার করছেন) ধরে রাখতে পারেন:

প্লাঙ্কার: http://plnkr.co/edit/HYDlaTNThZE02VqXrUCH?p=info

এইচটিএমএল:

<div ng-class="{'has-error': badEmailAddress}">
    <input type="email" class="form-control" id="email" name="email"
        ng-model="email" 
        ng-blur="emailBlurred(email.$valid)">
</div>

নিয়ামক:

$scope.badEmailAddress = false;

$scope.emailBlurred = function (isValid) {
    $scope.badEmailAddress = !isValid;
};

0

আপনি যদি বুটস্ট্র্যাপ 3 এবং কম CSS ব্যবহার করেন তবে নীচের কম স্নিপেটের সাথে ঝাপসা বৈধতা সক্ষম করতে পারবেন:

:focus ~ .form-control-feedback.glyphicon-ok {
  display:none;
}

:focus ~ .form-control-feedback.glyphicon-remove {
  display:none;
}

.has-feedback > :focus {
  & {
    .form-control-focus();
  }
}

0

আউট আমি একটি নির্দেশনা ব্যবহার করেছি। কোডটি এখানে:

app.directive('onBlurVal', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs, controller) {

            element.on('focus', function () {
                element.next().removeClass('has-visited');
                element.next().addClass('has-focus');
            });

            element.on('blur', function () {

                element.next().removeClass('has-focus');
                element.next().addClass('has-visited');
            });
        }
    }
})

আমার সমস্ত ইনপুট নিয়ন্ত্রণের পরবর্তী উপাদান হিসাবে একটি স্প্যান উপাদান রয়েছে, যেখানে আমার বৈধতা বার্তা প্রদর্শিত হয় এবং তাই প্রতিটি ইনপুট নিয়ন্ত্রণে একটি বৈশিষ্ট্য হিসাবে নির্দেশ যুক্ত করা হয় is

আমার কাছে (alচ্ছিক) .কেন্দ্রিক এবং আমার সিএসএস ফাইলে সিএসএস ক্লাসটি পরিদর্শন করা হয়েছে যা আপনি দেখতে পাচ্ছেন যে নির্দেশে রেফারেন্স দেওয়া হচ্ছে।

দ্রষ্টব্য: অ্যাডাস্ট্রোফেস ছাড়াই আপনার ইনপুট নিয়ন্ত্রণে ঠিক এইভাবে 'অন-ব্লার-ভ্যাল' যুক্ত করতে ভুলবেন না


0

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

<input type="text" class="form-control" name="inputPhone" ng-model="demo.phoneNumber" required ng-focus> <div ng-show="demoForm.inputPhone.$dirty && demoForm.inputPhone.$invalid && !demoForm.inputPhone.$focused"></div>


0

আমরা অনফোকস এবং অনব্লুর ফাংশন ব্যবহার করতে পারি। সহজ এবং সেরা হবে।

<body ng-app="formExample">
  <div ng-controller="ExampleController">
  <form novalidate class="css-form">
    Name: <input type="text" ng-model="user.name" ng-focus="onFocusName='focusOn'" ng-blur="onFocusName=''" ng-class="onFocusName" required /><br />
    E-mail: <input type="email" ng-model="user.email" ng-focus="onFocusEmail='focusOn'" ng-blur="onFocusEmail=''" ng-class="onFocusEmail" required /><br />
  </form>
</div>

<style type="text/css">
 .css-form input.ng-invalid.ng-touched {
    border: 1px solid #FF0000;
    background:#FF0000;
   }
 .css-form input.focusOn.ng-invalid {
    border: 1px solid #000000;
    background:#FFFFFF;
 }
</style>

এখানে চেষ্টা করুন:

http://plnkr.co/edit/NKCmyru3knQiShFZ96tp?p= পূর্বরূপ

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.