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表单的更多相关文章
	

    
						
  1. Angular 表单(二) - 模板驱动表单
		
    import { Component, OnInit } from '@angular/core'; import { Hero} from '../hero'; @Component({ selec ...
    
		
    2. 
						
  2. angular表单经验分享
		
    原文 https://www.jianshu.com/p/af359bd04f32 大纲 1.表单的名字不可以和传入的值的名字相同 2.在模板驱动表单的时候要使用angular表单的验证功能,需要将n ...
    
		
    3. 
						
  3. Angular 表单验证类库 ngx-validator 1.0 正式发布
		
    背景介绍 之前写了一篇 <如何优雅的使用 Angular 表单验证>,结尾处介绍了统一验证反馈的类库  ngx-validator  ,由于这段时间一直在新模块做微前端以及相关业务组件库, ...
    
		
    4. 
						
  4. Angular表单 （一）表单简介
		
    Angular 表单 angular提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单.二者都从视图中捕获用户输入事件.验证用户输入.创建表单模型.修改数据模型,并提供跟踪这些更改的 ...
    
		
    5. 
						
  5. Angular表单验证
		
    novalidate   去掉html5自带的验证 ng-minlength    规定输入文本的最小长度 ng-maxlength    规定输入文本的最大长度 ng-submit  接收一个方法名 ...
    
		
    6. 
								
  6. 简单的angular表单验证指令
		
    <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title& ...
    
		
    7. 
						
  7. angular表单验证实例----可用的代码
		
    前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ...
    
		
    8. 
						
  8. 从浅入深剖析angular表单验证
		
    最近手上维护的组件剩下的BUG都是表单验证,而且公司的表单验证那块代码经历的几代人,里面的逻辑开始变得不清晰,而且代码结构不是很angular. 是很有必要深入了解表单验证. 入门之前,我觉得应该先了 ...
    
		
    9. 
						
  9. angular 表单验证
		
    最近在用angular写表单验证时 , 不小心把ng-model全替换删掉了, 然后发现之前写的验证都失效, 在查阅资料和反复修改摸索后, 发现angular中的表单验证, 都是基于ng-model的 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. jquey easyui 常用方法
			
    jquey easyui 常用方法 2015-05-31 13:02 4473人阅读 评论(0) 收藏 举报 版本:1.4.2 一.easyui -textbox: 1.去空格: $('#tt1'). ...
    
			
    2. 
						
  2. [转]面向过程的分析(POA)，和面向对象的分析(OOA)
			
    欢迎转载本文,转载地址: http://www.juliantec.info/articles/basic-concept/poa-and-ooa.html 软件开发方法论概述 在60年代的软件开发行 ...
    
			
    3. 
						
  3. B  最熟悉的陌生人 (纪念当年就读的梅州市江南高级中学)
			
    最熟悉的陌生人 作者:张慧桥 枪与玫瑰 我看了一下聊天室的名单,哈哈哈,我不禁喜出望外:蝶恋花那丫头片子挂在线上呢,真是天助我也.初时的担心一扫而光,我精神抖擞地喝下一大口咖啡,猛抽了三口烟,现在的我 ...
    
			
    4. 
						
  4. day24：面向对象设计与面向对象编程、类和对象
			
    一.三大编程范式: 面向过程: 面向函数: 面向对象: 二.程序的进化论: 1.编程最开始就是无组织无结构,从简单控制流中按步写指令 2.从上述的指令中提取重复的代码块或逻辑,组织到一起(比方说,你定 ...
    
			
    5. 
						
  5. AngularJS的MVC中C的实现
			
    Angular的MVC中C的实现 注:在controller操作Dom效率是很低的,我们使用封装的指令去操作Dom
    
			
    6. 
						
  6. vc++>>Connection using old (pre-4.1.1) authentication protocol refused (client option 'secure_auth' enable
			
    用VC来连接远程MYSQL时,出现如标题一样的错误,网上搜索了此错误产生的原因,最后自己找到了解决办法. 此错误产生的原因: 异常原因在于服务器端的密码管理协议陈旧,使用的是旧有的用户密码格式存储:但 ...
    
			
    7. 
						
  7. OAF_开发系列04_实现OAF查询4种不同的实现方式的比较和实现（案例）
			
    2014-06-02 Created By BaoXinjian
    
			
    8. 
						
  8. vs2010下C++调用lib或dll文件
			
    注: DLL:表示链接库,包含dll,lib文件: dll: 表示my.dll文件 lib: 表示my.lib文件 C++ 调用.lib的方法: 一: 隐式的加载时链接,有三种方法 1  设置工程的  ...
    
			
    9. 
						
  9. 动态主机配置协议（DHCP）如何启动和关闭
			
    启动方法: 开始-->运行-->cmd-->回车-->net start dhcp 关闭方法: 开始-->运行-->cmd-->回车-->net sto ...
    
			
    10. 
						
  10. 调用 SSPI 失败，请参见内部异常。接收到的消息异常，或格式不正确。
			
    完整异常信息: System.Security.Authentication.AuthenticationException: 调用 SSPI 失败,请参见内部异常. ---> System.C ...
    
			
    11.