单击按钮

Question

我正在使用Angular2 / Typescript编程，对于添加表单，我需要添加添加/删除输入链接到ViewModel的字段集的可能性。所以基本上，我有一个主要的ViewModel，它包含一个辅助ViewModel（fieldset）的表。我尝试了不同的东西，但我是Angular的新手，所以我可能会错过重要的事情。

以下是我的HTML代码的代码：

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

我是否需要为字段集中的每个输入更改ngModel以匹配表格单元格？

接下来是Typescript代码：

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：这是我的两个ViewModel

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

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

////////////////////////////////////////////// < / p>

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

您可以使用ngFor索引删除正确的fieldset：

在你的模板中：

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