Angular實現動態添加刪除表單輸入框功能

 

 

1 <div class="form-group form-group-sm" *ngFor="let i of login">
2     <label class="col-form-label">用戶名</label>
3     <input class="form-control" [(ngModel)]="i.username" value="{{i.username}}">
4     <label class="col-form-label">密碼</label>
5     <input class="form-control" [(ngModel)]="i.password" value="{{i.password}}">
6     <button class="btn btn-link" (click)="removeInput(i)">刪除</button>
7   </div>
8   <button (click)="addInput()">增長</button>

 

 1 private id: string;
 2   login: any = [{ 'username': 'username' + this.id, 'password': 'pwd' + this.id }];
 3 
 4   addInput() {
 5     console.log('點擊');
 6     console.log(this.login);
 7     const number = this.login.length + 1;
 8     this.login.push({ 'username': 'username' + number, 'password': 'pwd' + number });
 9     console.log(this.login);
10   }
11 
12   removeInput(item) {
13     console.log(item);
14     const i = this.login.indexOf(item);
15     console.log(i);
16     this.login.splice(i, 1);
17   }