버튼을 클릭하면 필드 세트를 추가/제거하는 방법

Question

저는 Angular2/Typescript로 프로그래밍 중이며 추가 양식의 경우 입력이 ViewModel에 링크 된 필드 세트를 추가/삭제할 가능성을 추가해야합니다. 그래서 기본적으로 보조 ViewModel (fieldset)의 테이블을 구성하는 ViewModel을가집니다. 나는 다른 것을 시도했지만 Angular에서 새롭기 때문에 중요한 것들이 빠졌을 것입니다.

<div class="form-group"> 
 
       <div> 
 
        <label>Customer : </label> 
 
        <select class="form-control" required ngControl="viewModel.selectedCustomerStr" 
 
          [(ngModel)]="viewModel.selectedCustomerStr"> 
 
         <option value=""></option> 
 
         <option *ngFor="#customer of viewModel.customersListStr" [value]="customer">{{customer}}</option> 
 
        </select> 
 
       </div> 
 

 
       <div> 
 
        <label>Service provided: </label> 
 
        <select class="form-control" required ngControl="viewModel.serviceProvidedStr" 
 
          [(ngModel)]="viewModel.serviceProvidedStr"> 
 
         <option value=null></option> 
 
         <option *ngFor="#service of viewModel.servicesListStr" [value]="service">{{service}}</option> 
 
        </select> 
 
       </div> 
 

 
       <div> 
 
        <label>Service window : </label> 
 
        <select class="form-control" required ngControl="viewModel.selectedServiceWindowStr" 
 
         [(ngModel)]="viewModel.selectedServiceWindowStr"> 
 
         <option value=null></option> 
 
         <option *ngFor="#window of serviceWindowListStr" [value]="window">{{window}}</option> 
 
        </select> 
 
       </div> 
 

 
       <fieldset *ngFor="#choice of choices"> 
 
        <legend>DRP contact information</legend> 
 
        <div> 
 
         <label>DRP contact name:</label> 
 
         <input placeholder="Contact's Name" type="text" maxlenght=50 [(ngModel)]="viewModel.contactName" 
 
          class="form-control" required ngControl="name" #name="ngForm"> 
 
        </div> 
 

 
        <div> 
 
         <label>Start time:</label> 
 
         <input class="form-control" ngControl="timeStart" required type="time" 
 
          [(ngModel)]="viewModel.timeStart"> 
 
        </div> 
 

 
        <div> 
 
         <label>End time:</label> 
 
         <input class="form-control" ngControl="timeEnd" required type="time" 
 
          [(ngModel)]="viewModel.timeEnd"> 
 
        </div> 
 

 
        <div> 
 
         <label>Medium:</label> 
 
         <select class="form-control" required [(ngModel)]="viewModel.selectedMediumStr" ngControl="viewModel.selectedMediumStr" 
 
          #medium="ngForm"> 
 
         <option value=""></option> 
 
         <option *ngFor="#medium of viewModel.mediumsListStr" [value]="medium">{{medium}}</option> 
 
        </select> 
 
        </div> 
 

 
        <div> 
 
         <label>DRP contact address:</label> 
 
         <input placeholder="Contact's address" type="text" maxlenght=100 [(ngModel)]="viewModel.value" 
 
          class="form-control" required ngControl="value" #value="ngForm"> 
 
        </div> 
 

 
        <button class="remove" (click)="onRemoveFieldset()">Remove</button> 
 
       </fieldset> 
 

 
       <button class="add" (click)="onAddFieldset()">Add a contact</button>     
 
      </div>

나는 테이블 셀에 맞도록 FIELDSET의 모든 입력에 대한 ngModel를 변경해야합니까 : 여기

내 HTML 코드의 코드? 그냥 기본 추가의 뒤에 아무것도하지 않는 사람 제거, 순간

export class AddDrpsComponent extends BaseComponent implements OnInit { 
    viewModel:DrpDetailViewModel = new DrpDetailViewModel(); 
    tabDrpContact:DrpContactDetailViewModel[]; 
    serviceWindowListStr:String[]; 

    onAddFieldset() { 
     let newItemNo = this.tabDrpContact.length +1; 
     this.tabDrpContact.push(new DrpContactDetailViewModel(newItemNo)); 
    } 

    onRemoveFieldset(id:number) { 
     this.tabDrpContact.splice(id,1); 
    } 
} 

:

다음 타이프 스크립트 코드입니다.

Picture of the add form

내가 명확했다 희망, 영어가 모국어가 아닙니다.

진심으로,

플로리안은

편집 :

까지 편집 2 : 여기 내 두 뷰 모델입니다

import {DrpContact} from "./drp-contact"; 

export interface Drp { 
    id:number; 
    serviceWindow:string; 
    status:string; 
    customer:string; 
    serviceProvidedType:string; 
    drpContactList:DrpContact[]; 
} 

///////////// ///////////////////////////////

export interface DrpContact { 
    id:number; 
    name:string; 
    timeStart:string; 
    timeEnd:string; 
    value:string; 
    mediumType:string; 
} 

import {SelectOptionElement} from "../../shared/model/select-option-element"; 
import {Serializable} from "../../shared/technical/serializable"; 
import {DrpContactDetailViewModel} from "./drp-contact-detail-view-model"; 

export class DrpDetailViewModel extends Serializable { 
    id:number; 

    selectedCustomer:SelectOptionElement; 
    selectedCustomerStr:string; 
    serviceProvided:SelectOptionElement; 
    serviceProvidedStr:string; 
    selectedServiceWindow:SelectOptionElement; 
    selectedServiceWindowStr:string; 
    status:string; 
    drpContactDetailList:DrpContactDetailViewModel[]; 

    customer:SelectOptionElement[]; 
    customersListStr:String[]; 
    service:SelectOptionElement[]; 
    servicesListStr:String[]; 
    window:SelectOptionElement[]; 
} 

///////////////////// 


import {SelectOptionElement} from "../../shared/model/select-option-element"; 
import {Serializable} from "../../shared/technical/serializable"; 

export class DrpContactDetailViewModel extends Serializable { 
    id:number; 
    contactName:string; 
    timeStart:string; 
    timeEnd:string; 
    selectedMedium:SelectOptionElement; 
    selectedMediumStr:string; 
    value:string; 

    medium:SelectOptionElement[]; 
    mediumsListStr:String[]; 
} 

Answer 1

당신은 단지 올바른 fieldset 제거 ngFor의 인덱스를 사용할 수 있습니다

: 구성 요소에서

<fieldset *ngFor="#choice of choices; let id = index"> 
    //Code ... 
    <button class="remove" (click)="onRemoveFieldset(id)">Remove</button> 
</fieldset> 

:

이

onAddFieldset() { 
    let newItemNo = this.choices.length +1; 
    this.choices.push(new DrpDetailViewModel(newItemNo)); 
} 

onRemoveFieldset(id:number) { 
    this.choices.splice(id,1); 
} 

이 당신이이 가정 템플릿에서

을 일치하는 생성자 DrpDetailViewModel(id)

class DrpContactDetailViewModel extends Serializable { 
    id:number; 
    contactName:string; 
    timeStart:string; 
    timeEnd:string; 
    selectedMedium:SelectOptionElement; 
    selectedMediumStr:string; 
    value:string; 

    medium:SelectOptionElement[]; 
    mediumsListStr:String[]; 

    constructor(id : number) { this.id = id } 
}