Angular4實(shí)現(xiàn)動(dòng)態(tài)添加刪除表單輸入框功能
更新時(shí)間：2017年08月11日 14:29:36 作者：1葉知秋灬
這篇文章主要介紹了Angular4實(shí)現(xiàn)動(dòng)態(tài)添加刪除表單輸入框功能,需要的朋友可以參考下
首先介紹一下實(shí)現(xiàn)的效果,就是單一表單能實(shí)現(xiàn)添加其他的,也能刪除
代碼如下:
<h5>動(dòng)態(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)動(dòng)態(tài)添加刪除表單輸入框功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
angular2組件中定時(shí)刷新并清除定時(shí)器的實(shí)例講解
今天小編就為大家分享一篇angular2組件中定時(shí)刷新并清除定時(shí)器的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
AngularJS的日期格式化有兩種形式，一種是在HTML頁(yè)面，一種是在JS代碼里，都是用到AngularJS的過(guò)濾器$filter2015-12-12
requirejs AngularJS結(jié)合使用示例解析
這篇文章主要為大家介紹了requirejs AngularJS結(jié)合使用示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了Angular PWA使用的Demo示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
本文主要介紹了AngularJS的執(zhí)行流程。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
下面小編就為大家?guī)?lái)一篇AngularJS中的指令全面解析(必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
詳解AngularJS1.x學(xué)習(xí)directive 中‘& ’‘=’ ‘@’符號(hào)的區(qū)別使用
這篇文章主要介紹了詳解AngularJS1.x學(xué)習(xí)directive 中‘& ’‘=’ ‘@’符號(hào)的區(qū)別使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-08-08
Angular2中如何使用ngx-translate進(jìn)行國(guó)際化
本篇文章主要介紹了Angular2中使用ngx-translate進(jìn)行國(guó)際化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
angular.js實(shí)現(xiàn)購(gòu)物車(chē)功能
這篇文章主要為大家詳細(xì)介紹了angular.js購(gòu)物車(chē)功能的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
angular 動(dòng)態(tài)組件類(lèi)型詳解(四種組件類(lèi)型)
這篇文章給大家講解四種組件類(lèi)型，非常不錯(cuò)，具有參考借鑒價(jià)值，對(duì)angular 動(dòng)態(tài)組件類(lèi)型感興趣的朋友參考下吧2017-02-02