这是一个承诺。
我的组件代码: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;对于我的代码:)