AngularJS-7-表单

表单

<form name="myForm" ng-submit="PostForm()">

<ul>

<li><label>用户名：</label>

<input type="text"name="UserName"  ng-model=""form.UserName" required />

<b ng-show="myForm.UserName.$dirty && myForm.UserName.$invalid"><span ng-show="myForm.UserName.$error.required">请输入用户名</span></b>

</li>

---------------------------------------------------------------------------

<li><label>用户名：</label>

<input type="text"name="UserName"  ng-model=""UserName" ng-maxlength="18" ng-minlength="8" required />

<b ng-show="myForm.UserName.$dirty && myForm.UserName.$invalid">

<span ng-show="myForm.UserName.$error.required">请输入用户名</span>

<span >请输入8到18位用户名/span>

</b>

</li>

---------------------------------------------------------------------------

<li><label>编号：</label>

<input type="text"name="UserIndex"  ng-model=""UserIndex" ng-pattern="/^\d+$/"/>

<span ng-show="myForm.UserName.$dirty && myForm.UserName.$invalid" >请输入您的数字编号</span>

</li>

---------------------------------------------------------------------------

<input ng-diabled="myForm.$invalid" type="submit" value="提交">

---------------------------------------------------------------------------

<li><label> 昵称：</label><input type="text" ng-model=""form.NickName"/></li>

<li><label>年龄：</label><input type="text" ng-model=""form.Age"/></li>

<li><label>是否已婚：</label><input type="checkbox" ng-model=""form.IsMarried"/></li>

<li><label>喜爱的动物：</label>

<input type="radio" ng-model=""form.LoveAnimal" value="狗"/>

<input type="radio" ng-model=""form.LoveAnimal" value="猫"/>

</li>

<li><label>居住的城市：</label>

<select ng-model="form.LocationCity">

<option value="北京">北京</option>

<option value="上海">上海</option>

<option value="广州">广州</option>

</select>

<select ng-model="form.LocationCity" ng-option="obj.text as obj.value for obj in form.LocationCityList">

</select>

</li>

<li><<input type="submit" value="提交"></li>

</ul>

</form>

var app = angular.module("lesson",[])

app.cotroller("FormCtrl",function($scope){

$scope.formInitObj={UserName：“”，NickName:""}

$scope.form = {};

$scope.form.LocationCityList =[{text:"北京"，value:"北京"},{text:"上海"，value:"上海"},{text:"广州"，value:"广州"}]

$scope.PostForm=function(){

//验证   old

if($scope.form.UserName == "" || $scope.form.UserName == undefined){

alert();

return false

}

console.log($scope.form);

$scope.form = angular.copy($scope.formInitObj)

}

})