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 相关文章推荐
通过JAVAScript实现页面自适应
Jan 19 Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
微信小程序实现星星评分效果
Nov 01 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
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
php 多文件上传的实现实例
2016/10/23 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
实例说明Python中比较运算符的使用
2015/05/13 Python
python实现的简单抽奖系统实例
2015/05/22 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
python实现弹窗祝福效果
2019/04/07 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
个人自我鉴定写法
2013/11/30 职场文书
销售工作岗位职责
2013/12/24 职场文书
学校创先争优活动总结
2014/08/28 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
个人工作决心书
2015/09/22 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
Python字典的基础操作
2021/11/01 Python