from表单提交可以说是开发中最常见的交互,其中下面4种是博主在开发中遇到过的,在这里记录下来
//必填字段 如果a不填,则保存按钮不可点
<form name="saveRoomForm" novalidate>
<input ng-model="a" type="text" required>
<button class="lease-btn btn-blue" ng-disabled="saveRoomForm.$invalid" ng-click="saveRoom()">保存</button>
</form>
//检测表单是否被改动过(表单中有$dirty) 你修改了form表单中任意一个字段$dirty就会变成true,从而可以实现当你要离开当前页面是,提示你做出的修改为保存
<form name="fillInfoForm">
<div ng-include="'table.html'"></div>
</form>
//controller中
if($scope.fillInfoForm.$dirty){
if (confirm("所填的信息未保存,是否离开?")) {
//
}else {
return false;
}
}
//表单提交(校验字段) form表单中有ng-repeat循环出来的字段,能够轻易的检测出适合所有字段是否填写正确
<style>
input.ng-invalid{
border:1px solid red;
}
</style>
<form name="saveRoomForm" novalidate>
<input type="text" required>
<button class="lease-btn btn-blue" ng-disabled="saveRoomForm.$invalid" ng-click="saveRoom()">保存</button>
</form>
效果图如下:
//表单提交(校验特定错误)
<form name="saveRoomForm" novalidate>
<input ng-model="a" type="number"/>
<input max="{{a}}" ng-model="b" type="number"/>
<span style="color: red;right: 25px;position: absolute;top: 15px;" ng-show="saveRoomForm.b.$error.max">b须小于等于a</span>
</form>
效果图如下: