Angular实现动态添加删除表单输入框功能

 

 

<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>

 

private id: string;
  login: any = [{ 'username': 'username' + this.id, 'password': 'pwd' + this.id }];

  addInput() {
    console.log('点击');
    console.log(this.login);
    const number = this.login.length + 1;
    this.login.push({ 'username': 'username' + number, 'password': 'pwd' + number });
    console.log(this.login);
  }

  removeInput(item) {
    console.log(item);
    const i = this.login.indexOf(item);
    console.log(i);
    this.login.splice(i, 1);
  }