angularJs之form指令相關注意點
阿新 • • 發佈：2018-12-19
- HTML原生的form表單是不能巢狀的，而Angular封裝之後的form可以巢狀；
- ng 為form擴充套件了自動校驗，防止重複提交等功能；
- ng 對input元素的type進行了擴充套件，一共提供了以下10中型別：text, number, url , email, radio, checkbox, hidden, button, submit, reset
- ng 為表單內建了4種CSS樣式：ng-valid, ng-invalid, ng-pristine, ng-dirty
- 內息校驗器：require, minlength, maxlenghth
- 按鈕程式碼：
<!DOCTYPE html> <html lang="en" ng-app="TestFormModule"> <head> <meta charset="UTF-8"> <title>Ng form表單驗證</title> <script src="angular.min.js" ></script> <script> var appModule = angular.module('TestFormModule',[]); appModule.controller("TestFormController",function($scope){ $scope.user = { userName :'', password :'' }; $scope.save = function(){ alert("儲存資料！"+$scope.user.userName+"-"+$scope.user.password); } }); </script> </head> <body> <form name="myForm" ng-submit="save()" ng-controller="TestFormController"> <input name="userName" type="text" ng-model="user.userName" required/> <input name="password" type="password" ng-model="user.password" required/> <input type="submit" ng-disabled="myForm.$invalid"/> </form> </body> </html>
通過新增 ng-disabled="myForm.$invalid"，使提交按鈕根據表單的驗證狀態，檢驗提交按鈕的是否可用狀態。