部分表单验证及表单编辑记录

最近完成了部分的表单验证以及，在table中实现表单的编辑功能。在此记录自己的实现过程。

部分表单验证

效果图如下：

验证001

验证002

验证003

代码如下：

1
2
3
4
5
6
7
8
9
10
<div class="form-group" ng-if="data.parentMeasurementUnit.id">
                <label class="col-sm-4 control-label">相对于父计量单位的倍数</label>
                <div class="col-sm-8">
                    <input type="text" ng-disabled="disable"  ng-pattern="regex" ng-blur="line=true" class="form-control" placeholder="请输入倍数" ng-model="data.multipleOfParent" name="multipleOfParent" required>
                    <span class="text-danger" ng-show="myForm.multipleOfParent.$error.pattern && line">请输入正整数</span>
                    <div class="m-t-xs" ng-show="myForm.multipleOfParent.$touched && myForm.multipleOfParent.$invalid">
                        <span class="text-danger" ng-show="myForm.multipleOfParent.$error.required"><i class="fa fa-exclamation-triangle"></i> 倍数是必须的。</span>
                    </div>
                </div>
            </div>

实现过程：
目的实现相关是想验证前一部分的表单，当之输入前一部分表单时，验证通过可以提交。
当后一部分表单触发后开始验证全局表单，全部填写完成后才可以提交。

最后使用的是ng-if所实现的，在这里谈一下ng-if与’ng-show’和’ng-false’的区别：
相同点：
ng-show和ng-if都可以用来控制元素是否显示。当值为true时，表示显示该元素；当值为false时，表示隐藏该元素。
不同点：
ng-show在页面进行渲染的时候，已经将该元素加载，如果值为false，元素需要隐藏的话，在Chrome浏览器中可以查看出，渲染出来的元素仅仅是加了一个ng-hide的class，以此来控制元素的显示与否。
ng-if 在页面渲染的时候，如果值为false，是不会将元素加载出来的，如果值发生了改变为true，则通过操作dom的方式动态添加元素。注意：在这个时候，如果通过document，或者Jquery等方式获取元素进行操作的话，可能是获取不到的。

表单编辑

实现效果：

表单验证

实现代码：

1
2
3
4
5
6
<span ng-if="!measurementUnit._editWegiht">{{measurementUnit.weight}}</span>
<span ng-if="measurementUnit._editWegiht">
    <input class="form-control" type="number" name="weight" ng-model = "measurementUnit.weight" ng-change="updateWeight(measurementUnit.weight, measurementUnit.id, measurementUnit)">
</span>
<a class="btn btn-xs btn-warning" ng-if="!measurementUnit._editWegiht" ng-click="changeEditWeight(measurementUnit)"><i class="fa fa-paste"></i>&nbsp;编辑权重</a>
<a class="btn btn-xs btn-warning" ng-if="measurementUnit._editWegiht" ng-click="changeEditWeight(measurementUnit)"><i class="fa fa-paste"></i>&nbsp;保存权重</a>
1
2
3
4
5
6
7
8
// 点击转换权重是否可编辑
self.changeEditWeight = function(measurementUnit) {
    if (typeof (measurementUnit._editWegiht) === 'undefined' || measurementUnit._editWegiht === false)  {
      measurementUnit._editWegiht = true;
    } else {
      measurementUnit._editWegiht = false;
    }
};

实现过程：

使用ng-if来控制显示效果，同时使用ng-change来监听改变，当发生改变时，触发后台的改变数据的方法。

注意要为每一条表单数据添加控制显示的属性值。可以为每一个对象添加属性，也可以默认不添加，在点击判断的时候，加上undefined的判断。

推荐文章