آنگولر جی فرم واریفکیشن

آنگولر جی آپ کی انپُٹ ڈاٹا کو واریفکیشن کر سکتا ہے。

فرم واریفکیشن

آنگولر جی کلائنٹ سرور فرم واریفکیشن فراہم کرتی ہے。

آنگولر جی فرم اور ورودی فیلڈ (آپ ڈر، تیکسٹ ایئر، سلیکٹ) کی حالت کا نگرانی کرتی ہے اور آپ کو اس حالت کو یوزر کو اطلاع دینے کی اجازت دیتا ہے。

آنگولر جی اس کے بارے میں معلومات فراہم کرتی ہے کہ وہ کوئی اثر پذیر یا تبدیل کردیا ہوا ہے یا نہیں。

آپ اسٹینڈرڈ ایچ تی ام 5 اپرٹیٹس کا استعمال کریں اور اپنے واریفکیشن فنکشن بن سکتے ہیں。

کلائنٹ سرور سائیڈ واریفکیشن محض یوزر انپُٹ کا تحفظ نہیں کر سکتا۔ سرور سائیڈ واریفکیشن بھی ضروری ہے。

ضروری

ایچ تی ام 5 کا استعمال کریں ضروری مخصوص ورودی فیلڈ ضروری ہونا چاہئیے:

مثال

یہ ورودی فیلڈ ضروری ہے:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
<p>انٹرپوائز کی موثر حالت ہے: </p>  
<h1>{{myForm.myInput.$valid}}</h1>

تجربة شخصية

email

ایچ تی ام 5 کا استعمال کریں email مخصوص یہ مراد کا ای میل ہونا چاہئیے:

مثال

یہ ورودی فیلڈ کو ای میل ہونا چاہئیے:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
<p>انٹرپوائز کی موثر حالت ہے: </p>  
<h1>{{myForm.myInput.$valid}}</h1>

تجربة شخصية

فرم کی حالت اور انٹرپوائز کی حالت

AngularJS فرم اور انٹرپوائز فیلڈ کی حالت کو لگاتار اپدیت کرتا ہے۔

انٹرپوائز فیلڈ کی مندرجہ بالا حالت ہیں:

• $untouched اس فیلڈ کو لمس نہیں کیا گیا
• $touched اس فیلڈ کو لمس کیا گیا
• $pristine اس فیلڈ کو ترمیم نہیں کیا گیا
• $dirty اس فیلڈ کو ترمیم کیا گیا
• $invalid فیلڈ کا محتوا ناکارگرام
• $valid فیلڈ کا محتوا موثر

یہ تمام انٹرپوائز فیلڈ کی خصوصیات ہیں، جو حق یا نادرست کی صورت میں کچھ کچھ کی جاسکتی ہیں۔

فرم کی مندرجہ بالا حالت ہیں:

• $pristine کوئی فیلڈ ترمیم نہیں کیا گیا
• $dirty ایک یا کئی فیلڈ ترمیم کئے گئے ہیں
• $invalid فرم کا محتوا ناکارگرام
• $valid فرم کا محتوا موثر
• $subscribed فرم کا ارسال کیا گیا

یہ تمام فرم کی خصوصیات ہیں، جو حق یا نادرست کی صورت میں کچھ کچھ کی جاسکتی ہیں۔

آپ استحصال کی حالت کو استعمال کرکے معنادار پیغامات کا اظہار کرسکتے ہیں۔ مثلاً اگر کسی فیلڈ کو ضروری کیا گیا اور یہ خالی رہا تو استعمال کا حوصلہ بھیجائیں:

مثال

اگر اس فیلڈ کو لمس کیا گیا اور خالی رہا تو اشتباہی پیغام دکھائی جائے گی:

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">نام ضروری ہے。</span>

تجربة شخصية

CSS کلاس

AngularJS فرم اور انٹرپوائز فیلڈ کی حالت کی بنیاد پر ان میں CSS کلاسوں کو جوڑتا ہے۔

درج کی گئی کلاسوں کو انٹرپوائز فیلڈ میں یا انٹرپوائز فیلڈ سے ہٹایا گیا:

• ng-untouched اس فیلڈ کو لمس نہیں کیا گیا
• ng-touched اس فیلڈ کو لمس کیا گیا
• ng-pristine اس فیلڈ کو ترمیم نہیں کیا گیا
• ng-dirty اس فیلڈ کو ترمیم کیا گیا
• ng-valid فیلڈ کا محتوا موثر
• ng-invalid فیلڈ کا محتوا ناکارگرام
• ng-valid-key کسی بھی کلید کو ہر مرتبہ پرسنلائزیشن کریں۔ مثلاً:ng-valid-required، کتنی ضروری پرسنلائزیشن کی صورت میں بہت مفید ہوتا ہے
• ng-invalid-key مثلاً:ng-invalid-required

درج کی گئی کلاسوں کو فرم میں یا فرم سے ہٹایا گیا:

• ng-pristine کوئی فیلڈ ترمیم نہیں کئے گئے
• ng-dirty ایک یا کئی فیلڈ ترمیم کئے گئے ہیں
• ng-valid فرم کا محتوا موثر
• ng-invalid فرم کا محتوا ناکارگرام
• ng-valid-key کسی بھی کلید کو ہر مرتبہ پرسنلائزیشن کریں۔ مثلاً:ng-valid-required، کتنی ضروری پرسنلائزیشن کی صورت میں بہت مفید ہوتا ہے
• ng-invalid-key مثلاً:ng-invalid-required

اگر کلاس کی نمائندگی کرنے والی کا اقدار false، تو ان کلاسوں کو حذف کیا جائے گا۔

ایک بہتر اور سادہ استعمال کا رابطہ فراہم کرنے کیلئے ان کلاسوں کو استایل بنائیں، اپنے ایپلی کیشن کیلئے بہتر استعمال کا رابطہ فراہم کریں۔

مثال

معیاری CSS استایل کا استعمال:

<style>
input.ng-invalid {
  background-color: pink;
};
input.ng-valid {
  background-color: lightgreen;
};
</style>

تجربة شخصية

فرم کی استایل کو بھی قائم کرسکتے ہیں۔

مثال

برائے غیر ترمیم شدہ (مقابلہ) فرم اور ترمیم شدہ فرم میں استایل کا اپلی کیشن:

<style>
form.ng-pristine {
  background-color: lightblue;
};
form.ng-dirty {
  background-color: pink;
};
</style>

تجربة شخصية

اعتبارسنجی سفارشی

برای ایجاد یک تابع اعتبارسنجی سفارشی نیاز به مهارت‌های خاصی است؛ باید دستورالعمل جدیدی به برنامه اضافه کنید و از برخی پارامترهای مشخص برای انجام اعتبارسنجی درون تابع استفاده کنید.

مثال

دستورالعمل خود را ایجاد کنید که شامل تابع اعتبارسنجی سفارشی است و از طریق my-directive به آن اشاره کنید.

این فیلد تنها زمانی معتبر است که شامل حرف "e" باشد:

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>
<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
  بازگشت {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      تابع myValidation(value) {
        اگر (مقدار.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        };
        بازگشت مقدار;
      };
      mCtrl.$parsers.push(myValidation);
    };
  };
});
</script>

تجربة شخصية

در HTML، دستورالعمل جدید از طریق استفاده از ویژگی my-directive افزودیم تا به آن اشاره کنیم.

در JavaScript، ابتدا یک نام به نام myDirective دستورالعمل جدید.

به یاد داشته باشید که هنگام نام‌گذاری یک دستورالعمل، باید از روش نام‌گذاری کله‌ای استفاده کنید، مانند myDirective، اما هنگام فراخوانی آن، باید نام را با خط تیره جدا کنید، مانند my-directive.

سپس، یک شیء برگردانید که مشخص می‌کند ما نیاز داریم ngModel، یعنی ngModelController.

یک تابع مرتبط ایجاد کنید که پارامترهایی را می‌پذیرد، که چهارمین پارامتر mCtrl است ngModelController.

سپس یک تابع مشخص کنید، در این مثال نام دارد myValidationکه یک پارامتر می‌پذیرد، که آن مقدار ورودی عنصر است.

آیا این مقدار شامل حرف "e" است و وضعیت اعتبارسنجی کنترل مدل را تنظیم می‌کند، true یا false.

آخر،mCtrl.$parsers.push(myValidation); خواهد myValidation توابعی که به آرایه‌ای از توابع دیگر اضافه می‌شوند، این توابع در هر بار تغییر ورودی اجرا می‌شوند.

مثال بررسی

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<h2>مثال بررسی</h2>
<form ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>
<p>نام کاربری：<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">نام کاربری ضروری است。<
  </span>
</p>
<p>ای-میل：<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">ای-میل ضروری است。</span>
  <span ng-show="myForm.email.$error.email">غیرمجاز آدرس ای-میل。</span>
  </span>
</p>
<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {}}
  $scope.user = 'Bill Gates';
  $scope.email = 'bill.gates@gmail.com';
});
</script>
</body>
</html>

تجربة شخصية

خصائص نموذج HTML novalidate لإلغاء تشغيل التحقق الافتراضي للمتصفح.

مثال على التوضيح:

تعليمات AngularJS ng-model الربط بين عنصر الإدخال والنموذج.

عنصر النموذج لديه طريقتان:user و email.

بسبب ng-show، فقط عندما يكون user أو email $dirty و $invalid في هذه الحالة سيتم عرض spans يحتويون على لون red.