首页 > 代码库 > angular表单

angular表单

2024-08-30 12:14:39   219人阅读



angular的表单,点击确定进行创建,支持批量创建,表单验证有样式提醒;




<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <link rel="stylesheet" href="./../node_modules/bootstrap/dist/css/bootstrap.css">
    <style>
        fieldset{
            border:1px solid black;
            padding:10px;
            position:relative;
        }
    </style>

    <script src="./../node_modules/angular/angular.js"></script>
    <script src="form.controller.js"></script>
    <body ng-app="app">
    <!-- 控制器 -->
        <div class="row form-group"  ng-controller="form" style="width:50%;margin:100px auto">
            <!-- 表单 -->
            <form name="myForm">
                <!-- 点击添加策略 -->
                <button class="btn btn-primary" style="display:block;margin:5px auto;width:80%" ng-click="addScale()">
                <span class="fa fa-plus" ></span>添加策略
                </button>
                <p ng-show="data.type==‘1‘&&expand.length==0 || data.type==‘2‘&&narrow.length==0" style="color:#c82e29;text-align:center">相同策略只能创建一次</p>
                <!-- 循环生成 -->
                <fieldset class="margin-10" ng-repeat="x in rules">
                    <!-- 点击关闭当前块 -->
                    <span class="glyphicon glyphicon-remove" style="position:absolute;cursor:pointer;top:10px;right:10px;z-index:1" ng-click="reduce($index)"></span>
                    <!-- ng-class="{类名:bool,‘类名‘:bool2}" bool值表达式可以用{{}},myForm.inputName.$dirty是否修改,$valid验证是否通过; -->
                    <div class="col-md-5 margin-bottom-10" ng-class="{‘has-success‘:myForm.{{‘envs_name‘+$index}}.$valid,‘has-error‘:myForm.{{‘envs_name‘+$index}}.$invalid && myForm.{{‘envs_name‘+$index}}.$dirty}">
                        <label class="control-label">
                            <span class="symbol required"></span>请选择策略
                        </label><br>
                        <select class="form-control"  style="width:100%" required name="{{‘envs_name‘+$index}}" ng-model="x.metric">
                            <option value="{{x}}" ng-repeat="x in expand">{{formatMetric(x)}}</option>
                        </select>
                    
                    </div>
                    <div class="col-md-2" style="padding:0">
                        <div style="margin-top:30px" class="text-center">{{data.type =="1"?"大于或等于":"小于或等于"}}</div>
                    </div>
                    <div class="col-md-5 margin-bottom-15" ng-class="{‘has-success‘:myForm.{{‘envs_value‘+$index}}.$valid,‘has-error‘:myForm.{{‘envs_value‘+$index}}.$invalid && myForm.{{‘envs_value‘+$index}}.$dirty}">
                        <label class="control-label"><span class="symbol required"></span>百分比</label><br>
                        <input class="form-control" style="width:100%" step="0.1" required ng-pattern="/^\d+(\.\d+)+$/" max="100"  type="number" name="{{‘envs_value‘+$index}}" ng-model="x.threshold_value" >
                        <span ng-show="myForm.{{‘envs_value‘+$index}}.$invalid && myForm.{{‘envs_value‘+$index}}.$dirty" style="color:#c82e29">请输入0-100的小数</span>
                    </div>

                    <div class="col-md-4 margin-bottom-10" ng-if="data.type ==1" ng-class="{‘has-success‘:myForm.{{‘envs_priority‘+$index}}.$valid,‘has-error‘:myForm.{{‘envs_priority‘+$index}}.$invalid && myForm.{{‘envs_priority‘+$index}}.$dirty}">
                        <label class="control-label">
                            <span class="symbol required"></span>优先级
                            <br>
                        </label>
                        <input class="form-control" style="width:100%" required type="number" name="{{‘envs_priority‘+$index}}" ng-model="x.priority">
                    </div>
                    <div class=" margin-bottom-10" ng-class="{‘col-md-4‘:data.type==1,‘col-md-6‘:data.type==2,‘has-success‘:myForm.{{‘envs_init‘+$index}}.$valid,‘has-error‘:myForm.{{‘envs_init‘+$index}}.$invalid && myForm.{{‘envs_init‘+$index}}.$dirty}">
                        <label class="control-label"><span class="symbol required"></span> 最{{data.type==1 ? "大":"小"}}容器数量</label><br>
                        <input style="width:100%" required type="number" min=‘1‘ name="{{‘envs_init‘+$index}}" ng-model="x.container_num">
                        <span ng-show="myForm.{{‘envs_init‘+$index}}.$invalid && myForm.{{‘envs_init‘+$index}}.$dirty" style="color:#c82e29">请输入不小于1的整数</span>
                    </div>
                    <div class=" margin-bottom-10" ng-class="{‘col-md-4‘:data.type==1,‘col-md-6‘:data.type==2,‘has-success‘:myForm.{{‘envs_step‘+$index}}.$valid,‘has-error‘:myForm.{{‘envs_step‘+$index}}.$invalid && myForm.{{‘envs_step‘+$index}}.$dirty}">
                        <label class="control-label"><span class="symbol required"></span> 每次扩缩容数量</label><br>
                        <input class="form-control" style="width:100%" min=‘1‘ required type="number" name="{{‘envs_step‘+$index}}" ng-model="x.step">
                        <span ng-show="myForm.{{‘envs_step‘+$index}}.$invalid && myForm.{{‘envs_step‘+$index}}.$dirty" style="color:#c82e29">请输入不小于1的整数</span>
                    </div>

                </fieldset>


            </form>
            <button class="btn btn-primary btn-o pull-right" ng-click="ok(rules,myForm)">确定</button>
            <button class="btn btn-primary btn-o pull-right" ng-click="cancel()">取消</button>
        </div>
    </body>
</html>






 


下面是js代码




var myModule = angular.module(‘app‘, []);
console.log(myModule);
myModule.controller("form",["$scope",function($scope){
    //数据初始化
    $scope.rules=[{}];
    $scope.data={
        type:1,
    }
    $scope.expand = [ "memory.usage.percent","cpu.usage.percent","thread.usage.number"]

    //点击添加策略,增加表单块
    $scope.addScale = function(){
        $scope.rules.push({});
    }
    //点击X,删除当前块
    $scope.reduce = function($index){
            $scope.rules.splice($index,1);
            if($scope.rules.length === 0){
                $scope.addScale();
            }
    }
    
    $scope.formatMetric = function(metric) {
            switch (metric) {
                case "memory.usage.percent":
                    return "内存平均值";
                case "cpu.usage.percent":
                    return "CPU 平均值";
                case "thread.usage.number":
                    return "JVM 线程数";
                default:
                    return ""
            }
        };
       //点击确定
     $scope.ok = function(myForm){
          if(myForm.$invalid){
                return ;
            }
            //..
     }
    
}])




最后效果:点击添加策略,会增加一块策略,右上角X点击关闭,当表单验证不通过时,显出红色,通过绿色,验证不通过点击确定不发送请求;


技术分享


 
angular表单






























        

            
                
                  
                
                

                    联系

                    我们