首先介绍一下实现的效果,就是单一表单能实现添加其他的,也能删除
代码如下:
& lt; h6>动态添加表单& lt;/h6>
& lt; div类="形式"比;
& lt; div class="形式的班级form-group-sm“* ngFor=暗锹肌比梦冶?
& lt;标签类=" col-form-label "在用户名& lt;/label>
& lt;输入类=[(ngModel)]=氨淼タ丶Ｓ没凹壑?" https://www.yisu.com/zixun/{{i.username}}”在
& lt;标签类=" col-form-label "祝辞密码& lt;/label>
& lt;输入类=[(ngModel)]=氨淼タ丶Ｃ苈搿凹壑?" https://www.yisu.com/zixun/{{i.password}}”在
& lt;按钮类=" btn btn-link "(点击)=皉emoveInput(我)”在删除& lt;/button>
& lt;/div>
& lt;按钮(点击)=" addInput()在增加& lt;/button>
& lt;按钮(双击)=" dbclick()在双击& lt;/button>
{{登录| json}}
& lt;/div>之前
用户名:任何;
id:数量=1;
登录:任何=[{“用户名”:“用户名”+。id,“密码”:“pwd”+ this.id}];
addInput () {
console.log(“点击”);
console.log (this.login);
让=this.login数量。长度+ 1;
this.login。推动({“用户名”:“用户名”+数字,“密码”:“pwd”+号码});
console.log (this.login);
}
removeInput(项){
console.log(项);
让我=this.login.indexOf(项);
console.log(我);
this.login。拼接(我,1);
}
以上所述是小编给大家介绍的Angular4实现动态添加删除表单输入框功能,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
