AngularJS ဖောင်စစ်ဆေးခြင်း
AngularJS သည် input data ကို တရားဝင်အောင် ပြုလုပ်နိုင်သည်။
ပုံစံအတည်ပြုခြင်း။
AngularJS သည် client-side form validation ကိုပေးသည်။
AngularJS သည် ဖောင်ပုံစံနှင့် ထည့်သွင်းမှုအကွက်များ (input၊ textarea၊ select) ကို စောင့်ကြည့်ပြီး လက်ရှိအခြေအနေအကြောင်း သုံးစွဲသူအား အသိပေးနိုင်ပါသည်။
AngularJS သည် ၎င်းတို့ကို ထိမိခြင်းရှိ၊ မွမ်းမံထားခြင်း ရှိ၊ မရှိ စသည့် အချက်အလက်များကိုလည်း သိမ်းဆည်းထားသည်။
ထည့်သွင်းမှုကို အတည်ပြုရန် စံ HTML5 ရည်ညွှန်းချက်များကို သင်သုံးနိုင်သည် သို့မဟုတ် သင့်ကိုယ်ပိုင် validation လုပ်ဆောင်ချက်များကို သင်ပြုလုပ်နိုင်သည်။
Client-side validation သည် user input တစ်ခုတည်းကို လုံခြုံအောင် မလုပ်နိုင်ပါ။ Server side validation လည်းလိုအပ်ပါတယ်။
လိုအပ်သည်။
requiredထည့်သွင်းမှုအကွက်ကို ဖြည့်စွက်ရမည်ဟု သတ်မှတ်ရန် HTML5 ရည်ညွှန်းချက်ကို အသုံးပြုပါ ။
ဥပမာ
ထည့်သွင်းမှုအကွက် လိုအပ်သည်-
<form name="myForm">
<input name="myInput" ng-model="myInput"
required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
အီးမေးလ်
emailတန်ဖိုးသည် အီးမေးလ်ဖြစ်ရမည် ဟု သတ်မှတ်ရန် HTML5 အမျိုးအစားကို အသုံးပြုပါ -
ဥပမာ
ထည့်သွင်းသည့်အကွက်သည် အီးမေးလ်ဖြစ်ရမည်-
<form name="myForm">
<input name="myInput" ng-model="myInput"
type="email">
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
ပုံစံပြည်နယ်နှင့် ထည့်သွင်းမှုပြည်နယ်
AngularJS သည် form နှင့် input fields နှစ်ခုလုံး၏ အခြေအနေကို အဆက်မပြတ် အပ်ဒိတ်လုပ်နေပါသည်။
ထည့်သွင်းသည့်အကွက်များတွင် အောက်ပါအခြေအနေများ ရှိသည်။
$untouchedလယ်ကို မထိရသေးဘူး။$touchedလယ်ကွင်းတွေထိတယ်။$pristineအကွက်ကို မပြင်ရသေး$dirtyအကွက်ကို ပြုပြင်ပြီးပါပြီ။$invalidအကွက်အကြောင်းအရာသည် မမှန်ကန်ပါ။$validနယ်ပယ်အကြောင်းအရာသည် တရားဝင်သည်။
၎င်းတို့အားလုံးသည် input field ၏ ဂုဏ်သတ္တိများဖြစ်ပြီး သော်လည်းကောင်း true
သို့မဟုတ် false.
ဖောင်များတွင် အောက်ပါပြည်နယ်များ ပါရှိသည်။
$pristineအကွက်များကို ပြုပြင်မွမ်းမံရသေးပါ။$dirtyတစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသော ပြင်ဆင်ပြီးပါပြီ။$invalidဖောင်အကြောင်းအရာသည် မမှန်ကန်ပါ။$validဖောင်အကြောင်းအရာသည် တရားဝင်သည်။$submittedဖောင်တင်ပြီးပါပြီ။
၎င်းတို့အားလုံးသည် ပုံစံ၏ ဂုဏ်သတ္တိများဖြစ်ပြီး တစ်ခုခု true
သို့မဟုတ် false.
အသုံးပြုသူအား အဓိပ္ပာယ်ရှိသော မက်ဆေ့ချ်များကို ပြသရန် ဤပြည်နယ်များကို သင်အသုံးပြုနိုင်ပါသည်။ ဥပမာ၊ အကွက်တစ်ခု လိုအပ်ပြီး အသုံးပြုသူက ၎င်းကို ကွက်လပ်ထားခဲ့ပါက၊ အသုံးပြုသူကို သတိပေးသင့်သည်-
ဥပမာ
အကွက်ကို ထိပြီး ဗလာဖြစ်နေလျှင် အမှားသတင်းကို ပြပါ-
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched
&& myForm.myName.$invalid">The name is required.</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>
စိတ်ကြိုက်အတည်ပြုချက်
သင်၏ကိုယ်ပိုင် validation function ကိုဖန်တီးရန်အနည်းငယ်ပိုမိုခက်ခဲသည်။ သင့်လျှောက်လွှာတွင် လမ်းညွှန်ချက်အသစ်တစ်ခုကို ထည့်သွင်းရမည်ဖြစ်ပြီး အချို့သော သတ်မှတ်ထားသော အကြောင်းပြချက်များဖြင့် လုပ်ဆောင်မှုတစ်ခုအတွင်း တရားဝင်အတည်ပြုမှုကို ကိုင်တွယ်ဖြေရှင်းရန် လိုအပ်သည်။
ဥပမာ
စိတ်ကြိုက်တရားဝင်မှုဆိုင်ရာ လုပ်ဆောင်ချက်ပါရှိသော သင့်ကိုယ်ပိုင်လမ်းညွှန်ချက်ကို ဖန်တီးပြီး ၎င်းကို အသုံးပြု၍ ကိုးကားပါ 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() {
return {
require: 'ngModel',
link: function(scope, element,
attr, mCtrl) {
function myValidation(value)
{
if (value.indexOf("e") > -1)
{
mCtrl.$setValidity('charE',
true);
} else {
mCtrl.$setValidity('charE', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
</script>
ဥပမာ ရှင်းပြထားသည်-
HTML တွင်၊ လမ်းညွှန်ချက်အသစ်ကို attribute ကိုအသုံးပြု၍ ရည်ညွှန်းပါမည်
my-directive။
JavaScript တွင် အမည်ပေးထားသော လမ်းညွှန်ချက်အသစ်ကို ပေါင်းထည့်ခြင်းဖြင့် စတင်ပါသည် myDirective။
ညွှန်ကြားချက်တစ်ခုကို အမည်ပေးသည့်အခါတွင် ကုလားအုတ်အမည်ကို အသုံးပြုရမည်
myDirective၊ သို့သော် ၎င်းကိုခေါ်ဆိုသည့်အခါတွင် -သီးခြားအမည်ကို
အသုံးပြုရမည်ကို သတိရပါ my-directive။
ထို့နောက် ngModelController ဖြစ်သည့် ကျွန်ုပ်တို့ လိုအပ်သော သင်သတ်မှတ်သည့် အရာဝတ္ထု ngModelကို ပြန်ပေးပါ။
စတုထ္ထမြောက်အငြင်းအခုံဖြစ်သည့် mCtrl၊ သည် ၊ ngModelControllerဟူသော အကြောင်းပြချက်အချို့ကိုယူဆောင်သည့် ချိတ်ဆက်ခြင်းလုပ်ဆောင်ချက်တစ်ခုပြုလုပ်ပါ။
ထို့နောက် လုပ်ဆောင်ချက်တစ်ခုကို သတ်မှတ်ပါ၊ ဤကိစ္စတွင် myValidation၊ အကြောင်းပြချက်တစ်ခုယူသည့်၊ ဤအကြောင်းပြချက်သည် ထည့်သွင်းသည့်ဒြပ်စင်၏တန်ဖိုးဖြစ်သည်။
တန်ဖိုးတွင် အက္ခရာ "e" ပါရှိမရှိ စမ်းသပ်ပြီး မော်ဒယ် ထိန်းချုပ်ကိရိယာ၏ တရားဝင်မှုကို တစ်ခုခု trueသို့မဟုတ် false.
နောက်ဆုံးတွင်၊ ထည့်သွင်းမှုတန်ဖိုး ပြောင်းလဲသည့်အခါတိုင်း လုပ်ဆောင်မည့် လုပ်ဆောင်ချက်ကို အခြား array တစ်ခုသို့ mCtrl.$parsers.push(myValidation);ပေါင်းထည့် မည်ဖြစ်သည်။
myValidation
အတည်ပြုခြင်း ဥပမာ
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp"
ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<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">Username
is required.</span>
</span>
</p>
<p>Email:<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">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</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 = 'John Doe';
$scope.email = '[email protected]';
});
</script>
</body>
</html>
default browser validation ကိုပိတ်ရန်အတွက် HTML form attribute novalidate ကိုအသုံးပြုသည်။
နမူနာရှင်းပြထားပါတယ်။
AngularJS ညွှန်ကြားချက် ng-model သည် ထည့်သွင်းသည့်ဒြပ်စင်များကို မော်ဒယ်နှင့် ချိတ်ဆက်ပေးသည်။
မော်ဒယ်အရာဝတ္တုတွင် အသုံးပြုသူ နှင့် အီးမေလ်း တို့၏ ဂုဏ်သတ္တိနှစ်ခု ရှိသည်။
ng-show ကြောင့် ၊ အသုံးပြုသူ သို့မဟုတ် အီးမေးလ်သည် $ညစ်ပတ် နေပြီး $invalid ဖြစ်သောအခါမှသာ color-red ပါသော အပိုင်းများကို ပြသ ပါသည်။