export class TComponent {
username: any;
id: number = 1;
login:any = [{"username": "username" + this.id,"password": "pwd" + this.id}];
addInput() {
var number = this.login.length + 1;
this.login.push({"username": "username" + number, "password": "pwd" + number});
}
removeInput(item) {
console.log(item);
let i = this.login.indexOf(item);
console.log(i);
this.login.splice(i, 1);
}
}
<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)">Remove</button>
</div>
<button class="btn btn-link" (click)="addInput()">Add</button>
{{ login | json }}
</div>
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
有趣的CSS - 简约大方的输入框
一款简约大方的动态输入框,适用于表单提交、账号登录入口。
css 输入框 前端 ui 输入框交互 -
Angular4_清空input输入框
Angular4_清空input输入框
input Angular App -
angular2
angular2
angular2 -
输入框input只能输入数字
利用正则表达式,输入框只能输入数字,否则为空; 用到的js有replace,no-pattern; vla.replace(A,B);//用B取代A的值,...
正则表达式 python 算法 java 人工智能 -
多个input 输入框
1.[root@yyjk templates]# cat displayOracleExport.html 运维平台 数据库服务名 数据库IP 数据库用户名 数据...
css oracle 数据库 html javascript -
Linux gdp 导出java内存
一、关于Linux备份文件和应用的几个命令:tar和cp 在工作中,经常来备份文件和系统应用,常用到的主要是tar和cp命令,分别介绍如下: 一、tar命令,这个现在经常使用用来打包: tar包指的是档案文件:tar -cvf filename_20140805.tarfilename 打tar包的方法 tar -xvf filename_20140805.tar 解
Linux gdp 导出java内存 linux下备份一个目录下所有文件及目录 bc 备份文件 拷贝文件