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 相关文章推荐
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
js时间控件只显示年月
Jan 08 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
JS中call和apply函数用法实例分析
Jun 20 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
js实现百度登录窗口拖拽效果
Mar 19 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
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
XHProf报告字段含义的解析
2016/05/17 PHP
基于php实现的验证码小程序
2016/12/13 PHP
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
python检查URL是否正常访问的小技巧
2017/02/25 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
python颜色随机生成器的实例代码
2020/01/10 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
python 通过文件夹导入包的操作
2020/06/01 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
计算机应用与科学个人的自我评价
2013/11/15 职场文书
获奖的大学生创业计划书
2014/01/05 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
Rust中的Struct使用示例详解
2022/08/14 Javascript