Angular 4 동적 추가 삭제 폼 입력 상자 기능 구현

먼저 실현 효 과 를 소개 하 겠 습 니 다.단일 폼 이 다른 것 을 추가 할 수도 있 고 삭제 할 수도 있 습 니 다.

코드 는 다음 과 같 습 니 다:

<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)">  </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('  '); 
  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); 
 } 
총결산
위 에서 말 한 것 은 소 편 이 소개 한 Angular 4 가 동적 으로 폼 입력 상자 삭제 기능 을 추가 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

좋은 웹페이지 즐겨찾기