Angular4实现动态添加删除表单输入框功能


Posted in Javascript onAugust 11, 2017

首先介绍一下实现的效果,就是单一表单能实现添加其他的,也能删除

Angular4实现动态添加删除表单输入框功能

代码如下:

<h5>动态添加表单</h5> 
<div class="form"> 
 <div class="form-group form-group-sm" *ngFor="let i of login"> 
  <label class="col-form-label">用户名</label> 
  <input class="form-control" [(ngModel)]="i.username" value="{{i.username}}"> 
  <label class="col-form-label">密码</label> 
  <input class="form-control" [(ngModel)]="i.password" value="{{i.password}}"> 
  <button class="btn btn-link" (click)="removeInput(i)">删除</button> 
 </div> 
 <button (click)="addInput()">增加</button> 
 <button (dblclick)="dbclick()">双击</button> 
 {{ login | json }} 
</div>
username: any; 
 id: number = 1; 
 login:any = [{"username": "username" + this.id,"password": "pwd" + this.id}]; 
 addInput() { 
  console.log('点击'); 
  console.log(this.login); 
  let number = this.login.length + 1; 
  this.login.push({"username": "username" + number, "password": "pwd" + number}); 
  console.log(this.login); 
 } 
 removeInput(item) { 
  console.log(item); 
  let i = this.login.indexOf(item); 
  console.log(i); 
  this.login.splice(i, 1); 
 }

总结

以上所述是小编给大家介绍的Angular4实现动态添加删除表单输入框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 Javascript
react+antd 递归实现树状目录操作
Nov 02 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 #Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 #Javascript
JSON对象转化为字符串详解
Aug 11 #Javascript
JS中Swiper的使用和轮播图效果
Aug 11 #Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 #Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 #Javascript
js 奇葩技巧之隐藏代码
Aug 11 #Javascript
You might like
第十五节--Zend引擎的发展
2006/11/16 PHP
php 设计模式之 工厂模式
2008/12/19 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
javascript 图片裁剪技巧解读
2012/11/15 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
js实现登录与注册界面
2017/11/01 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
js prototype深入理解及应用实例分析
2019/11/25 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
Python json模块使用实例
2015/04/11 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
用python实现对比两张图片的不同
2018/02/05 Python
python中使用print输出中文的方法
2018/07/16 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
python实现简单的tcp 文件下载
2020/09/16 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
总裁办公室主任职责
2014/01/02 职场文书
清洁工表扬信
2014/01/08 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
英文商务邀请函范文
2015/01/31 职场文书
代理词怎么写
2015/05/25 职场文书
党员发展大会主持词
2015/07/03 职场文书
检讨书格式
2019/04/25 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers