angular学习笔记之form表单提交

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>

效果图如下：