在ng中,針對表單和空間提供了屬性,用于驗(yàn)證控件交互的狀態(tài)
布爾類型:
ng-valid 表單通過驗(yàn)證時(shí)設(shè)置
ng-invalid 表單未通過驗(yàn)證時(shí)設(shè)置
ng-pristine 表單沒有改動(dòng)時(shí)設(shè)置
ng-dirty 表單有改動(dòng)時(shí)設(shè)置
對象:
$error
注意事項(xiàng):
①給表單以及表單組件 加上name屬性
②給需要用到的表單組件 ,加上ngModel
③屬性的用法
myForm.t_age.dirty/pristine/valid/invalid/$error
案例如下
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/angular.js"></script></head><body><div ng-controller="myCtrl"> <form name="myForm" ng-submit="submitInfo()"> <input type="text" name="t_name" ng-model="userName" required/> <span ng-show="myForm.t_name.$error.required"> 姓名不能為空 </span> <br/> <input type="text" name="t_age" ng-model="userAge" required/> <span ng-show="myForm.t_age.$invalid">驗(yàn)證失敗</span> <span ng-show="myForm.t_age.$pristine">沒有輸入過</span> <br/> <input ng-disabled="myForm.$invalid" type="submit" value="提交"/> </form></div><script> var app = angular.module('myApp', ['ng']); app.controller('myCtrl', function ($scope) { $scope.submitInfo = function () { console.log($scope.userName,$scope.userAge); } });</script></body></html>以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持錯(cuò)新站長站。
新聞熱點(diǎn)
疑難解答
圖片精選