为什么在添加新内容时删除上一个字段?

时间:2018-06-08 05:28:42

标签: angular typescript

这是一个承诺。

我的组件代码:https://pastebin.com/grayJu5V

public dublicateField(field, index) {
    let fieldIndex = this._columns[0].indexOf(field);
    let newField = `${field}_${index}`;
    this._columns[0].splice(fieldIndex + 1, 0, newField);
    this._fieldsConfig[field].addField = false;
    this._fieldsConfig[field].removeField = true;
    this._fieldsConfig[newField] = {
        field: newField,
        hideCondition: this._fieldsConfig[field].hideCondition,
        label: this._fieldsConfig[field].label,
        placeholder: this._fieldsConfig[field].placeholder,
        type: this._fieldsConfig[field].type,
        addField: true,
        removeField: false
    };
    this.formModel.controls[newField] = this.formModel.controls[field];
    this.formModel.controls[newField].setValue('');
}

我的模板代码:https://pastebin.com/g9wh9R5s

<div class="form-group" *ngSwitchDefault [hidden]="_fieldsConfig[field].hideCondition()">
<input-notification *ngIf="formModel.controls[field].message && formModel.controls[field].message !== ''"
                                                [message]="formModel.controls[field].message"
                                                (notificationClicked)="closeNotification(field)">
</input-notification>

    <input [formControlName]="field"
           (keypress)="closeNotification(field)"
           [id]="field"
           [placeholder]="_fieldsConfig[field].placeholder"
           [attr.type]="_fieldsConfig[field].type"
           [value]="(selectedCity && field.includes('select')) ? selectedCity : ''"
           [ngClass]="(field.includes('bonus') && !field.includes('additional')) ? 'add-field-btn' : ''"
           *ngIf="!field.includes('additional')"
           (click)="field.includes('select') ? showCities() : ''"
           autocomplete="nope" autocapitalize="off" spellcheck="false" autocorrect="off"
           class="bonus-input has-placeholder" />

    <button class="add-field"
            *ngIf="(field.includes('bonus') &&
            !field.includes('additional')) &&
            _fieldsConfig[field].addField"
            (click)="dublicateField(field, i)">ADD</button>
    <label class="bottom-label" [attr.for]="field">
        <span>{{ _fieldsConfig[field].arguments }}</span>
    </label>
 </div>

如何制作动态字段?

PS。对不起,我的英语&amp;对于我的代码:)

0 个答案:

没有答案