AngularJS ఫారమ్ పరిశీలన

AngularJS ప్రవేశాల డాటాను పరిశీలించగలదు.

ఫారమ్ పరిశీలన

AngularJS క్లయింట్ ఫారమ్ పరిశీలనను అందిస్తుంది.

AngularJS ఫారమ్ మరియు ప్రవేశం ఫీల్డ్స్ (input, textarea, select) యొక్క స్థితిని పరిశీలిస్తుంది మరియు వినియోగదారుకు ప్రస్తుత స్థితిని తెలియజేయడానికి అనుమతిస్తుంది.

AngularJS వాటిని టచ్ అయ్యాయి లేదా మార్చబడ్డాయి అని సమాచారం కలిగి ఉంటుంది.

మీరు ప్రామాణిక HTML5 లక్షణాలను ఉపయోగించి ప్రవేశాలను పరిశీలించవచ్చు లేదా స్వంత పరిశీలన ఫంక్షన్ను సృష్టించవచ్చు.

క్లయింట్ పరిశీలన కేవలం వినియోగదారు ప్రవేశాలను రక్షించలేదు. సర్వర్ ప్రక్రియలో పరిశీలనగా కూడా అవసరం.

required

HTML5 లక్షణాలను ఉపయోగించండి required ఈ ప్రవేశం అవసరమైనది పొందండి:

అనుకూలంగా ఉంటుంది

ఈ ప్రవేశం అవసరమైనది:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  

输入的有效状态是：
  

{{myForm.myInput.$valid}}

亲自试一试

email

HTML5 రకం ఉపయోగించండి email ఈ విలువను ఇమెయిల్ అని ఉండాలి:

అనుకూలంగా ఉంటుంది

ఈ ప్రవేశం ఇమెయిల్ అని ఉండాలి:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  

输入的有效状态是：
  

{{myForm.myInput.$valid}}

亲自试一试

表单状态和输入状态

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 నిర్వహణలో స్టైల్స్ అప్లై చేయండి:

亲自试一试

ఫార్మ్ యొక్క స్టైల్స్ నిర్ణయించవచ్చు.

అనుకూలంగా ఉంటుంది

సంశోధించని (మూల పుట్టుబడిన) ఫార్మ్ మరియు సంశోధించబడిన ఫార్మ్ కు స్టైల్స్ అప్లై చేయండి:

亲自试一试

自定义验证

创建一个自己的验证函数需要一些技巧；您必须向应用程序添加新指令，并使用某些指定参数处理函数内部的验证。

అనుకూలంగా ఉంటుంది

మీ స్వంత డిరెక్టివ్ సృష్టించండి అనేది మరియు అది కలిగి ఉండే అనుకూలంగా ఉంటుంది స్వంత పరిశీలన ఫంక్షన్ అనేది ద్వారా పరిశీలన చేయడానికి ఉపయోగించండి అనేది 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);
    };
  };
});

亲自试一试

Example Explained:

హ్ట్మ్ల్ లో కొత్త డిరెక్టివ్ ప్రసక్తి చేయడానికి పరామీతి అనుకూలంగా ఉంటుంది ఉపయోగించండి అనేది my-directive అనేది ప్రసక్తి చేయండి.

జావాస్క్రిప్ట్ లో మేము మొదటగా ఒక పేరు చేసి 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>
  </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';
});

亲自试一试

HTML 表单属性 novalidate 用于禁用默认的浏览器验证。

例子解释：

AngularJS ఇన్స్ట్రక్షన్స్ ng-model 将输入元素绑定到模型。

模型对象有两个属性：user మరియు email。

由于 ng-show，只有当 user 或 email 为 $dirty మరియు $invalid color:red తో చూపబడే spans ను చూపిస్తుంది.