angularフォーム認証大全&angularフォームコントロール
6254 ワード
Q:novalidate:通常のフォームのコミットをブロックする
Q:formでデータが間違っている場合は使用できません
Q入力時に正しいかどうかを判断し、入力ボックススタイルにタイムリーに与える
Q入力時にエラーメッセージを表示する
<form class="form-horizontal" role="form" name="adduserForm" novalidate="novalidate">// ， novalidate ， 。 Q:formでデータが間違っている場合は使用できません
<button ng-disabled="adduserForm.$invalid">Save Inner</button> Q入力時に正しいかどうかを判断し、入力ボックススタイルにタイムリーに与える
input.ng-invalid.ng-dirty {
border-color: #a94442 //
}
input.ng-valid.ng-dirty {
border-color: #3c763d;//
}Q入力時にエラーメッセージを表示する
<div class="error" ng-show="adduserForm.firstName.$dirty &&adduserForm.firstName.$invalid">// "firstName" div</div>Q:设置不能为空
<input type="text" class="form-control " name="firstName" ng-model="useradd.firstName" required /> <div class="error" ng-show="adduserForm.firstName.$dirty &&adduserForm.firstName.$invalid">// "firstName" div <span ng-show="adduserForm.firstName.$error.required"> FirstName is required</span>// </div>
Q:設定を空にすることはできません<input type="text" class="form-control " name="firstName" ng-model="useradd.firstName" ng-minlength="1" ng-maxlength="200"/> <div class="error" ng-show="adduserForm.firstName.$dirty &&adduserForm.firstName.$invalid">// "firstName" div <span ng-show="adduserForm.firstName.$error.minlength || adduserForm.firstName.$error.maxlength"> The input value must be between 1-200</span>/ / </div>
Q:EMAIL形式認証
ここでは正規表現の使い方を示すためである.<input type="email" class="form-control" name="email" ng-model="useradd.email" ng-pattern="/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/"//> <div class="error" ng-show="adduserForm.email.$dirty &&adduserForm.email.$invalid"> <span style="white-space:pre"> </span> <span ng-show="adduserForm.email.$error.pattern"> Email Address </span> </div>
もう一つの直接判断でよい(これを推奨する)<input type="email" class="form-control" name="email" ng-model="useradd.email" required /> <div class="error" ng-show="adduserForm.email.$dirty &&adduserForm.email.$invalid"> <span ng-show="adduserForm.email.$error"> Email Address format error</span> </div>
Q:ボタンの発行とリセット<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="formCtrl"> <form novalidate > First Name:<br> <input type="text" ng-model="user.firstName"><br> Last Name:<br> <input type="text" ng-model="user.lastName"> <br><br> <button ng-click="reset()">RESET</button> <button ng-click="sub(user)">SUBMIT</button> </form> </div> <script> var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) { $scope.master = {firstName:"John", lastName:"Doe"}; $scope.sub = function(infor) { alert(infor.firstName) }; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset(); }); </script> </body> </html>
注意事項:
1.form上のラベルにname属性があることを確認する.2.formにaction属性は使用できません.コミットはng-submitによって処理する.各inputには必ずng-modelがあり、nameが便利に引用され、requireやng-minlengthなどが機能することが望ましい.4.novalidate:火狐、グーグルなどの標準ブラウザはHTML 5をよくサポートしています.HTML 5のinputのtype属性には既に検証機能が備わっていることが知られている.自分で検証方法を定義する場合は、ブラウザの自己検証を避けるためにnovalidateプロパティを追加します. 5.typeタイプ:HTML 5のtype属性にはemail、number、urlなどを含めることができますが、angularはまた内部でこれらの属性を書き換えているので、直接判断して使えばいいのです.これらの内容はng-pattern正則を利用する必要はありません.
フォームコントロール
Q:ラジオボタン<label class="checkbox-inline"> <input type="radio" name="optionsType" ng-model="addProj.type" > Date </label> <label class="checkbox-inline"> <input type="radio" name="optionsType" ng-model="addProj.type" > Dropdown </label> <label class="checkbox-inline"> <input type="radio" name="optionsType" ng-model="addProj.type" > Seperator </label>
Q:複数選択ボタン<input type="checkbox" ng-model="a" ng-true-value=" " ng-false-value=" " />
Q入力ボックス<input type="text" ng-model="topic.title" />
Q:テキストフィールド<textarea class="form-control " ng-model="myText" ></textarea>
Q:select<select class="form-control " ng-model="fcompanyValue" ng-options="item.id as item.value for item in fcompany"></select>
js:$scope.fcompany = [ { id : "", value : 'all' }, { id : "gap china", value : 'gap china' } ]; $scope.fcompanyValue = $scope.fcompany[0].id;