在ng中,針對表單和空間提供了屬性,用于驗證控件交互的狀態
布爾類型:
ng-valid 表單通過驗證時設置
ng-invalid 表單未通過驗證時設置
ng-pristine 表單沒有改動時設置
ng-dirty 表單有改動時設置
對象:
$error
注意事項:
①給表單以及表單組件 加上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">驗證失敗</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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答