Angular4實(shí)現(xiàn)動態(tài)添加刪除表單輸入框功能
更新時(shí)間:2017年08月11日 14:29:36 作者:1葉知秋灬
這篇文章主要介紹了Angular4實(shí)現(xiàn)動態(tài)添加刪除表單輸入框功能,需要的朋友可以參考下
首先介紹一下實(shí)現(xiàn)的效果,就是單一表單能實(shí)現(xiàn)添加其他的,也能刪除

代碼如下:
<h5>動態(tài)添加表單</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('點(diǎn)擊');
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);
}
總結(jié)
以上所述是小編給大家介紹的Angular4實(shí)現(xiàn)動態(tài)添加刪除表單輸入框功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
angular2組件中定時(shí)刷新并清除定時(shí)器的實(shí)例講解
今天小編就為大家分享一篇angular2組件中定時(shí)刷新并清除定時(shí)器的實(shí)例講解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
requirejs AngularJS結(jié)合使用示例解析
這篇文章主要為大家介紹了requirejs AngularJS結(jié)合使用示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
詳解AngularJS1.x學(xué)習(xí)directive 中‘& ’‘=’ ‘@’符號的區(qū)別使用
這篇文章主要介紹了詳解AngularJS1.x學(xué)習(xí)directive 中‘& ’‘=’ ‘@’符號的區(qū)別使用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-08-08
Angular2中如何使用ngx-translate進(jìn)行國際化
本篇文章主要介紹了Angular2中使用ngx-translate進(jìn)行國際化,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05

