[CST-3782] Make changes in order to remove template row in form's repeatable fields

This commit is contained in:
Giuseppe Digilio
2021-02-17 16:10:22 +01:00
parent 942dd2e72e
commit 151b02aeec
12 changed files with 154 additions and 179 deletions

View File

@@ -187,7 +187,6 @@ export class FormComponent implements OnDestroy, OnInit {
if (field) {
const model: DynamicFormControlModel = this.formBuilderService.findById(fieldId, formModel);
this.formService.addErrorToField(field, model, error.message);
// this.formService.validateAllFormFields(formGroup);
this.changeDetectorRef.detectChanges();
}
@@ -300,55 +299,15 @@ export class FormComponent implements OnDestroy, OnInit {
removeItem($event, arrayContext: DynamicFormArrayModel, index: number): void {
const formArrayControl = this.formGroup.get(this.formBuilderService.getPath(arrayContext)) as FormArray;
this.removeArrayItem.emit(this.getEvent($event, arrayContext, index - 1, 'remove'));
this.removeArrayItem.emit(this.getEvent($event, arrayContext, index, 'remove'));
this.formBuilderService.removeFormArrayGroup(index, formArrayControl, arrayContext);
this.formService.changeForm(this.formId, this.formModel);
}
insertItem($event, arrayContext: DynamicFormArrayModel, index: number): void {
const formArrayControl = this.formGroup.get(this.formBuilderService.getPath(arrayContext)) as FormArray;
// First emit the new value so it can be sent to the server
const value = formArrayControl.controls[0].value;
const event = this.getEvent($event, arrayContext, 0, 'add');
this.addArrayItem.emit(event);
this.change.emit(event);
// Next: update the UI so the user sees the changes
// without having to wait for the server's reply
// add an empty new field at the bottom
this.formBuilderService.addFormArrayGroup(formArrayControl, arrayContext);
// set that field to the new value
const model = arrayContext.groups[arrayContext.groups.length - 1].group[0] as any;
if (model.hasAuthority) {
model.value = Object.values(value)[0];
const ctrl = formArrayControl.controls[formArrayControl.length - 1];
const ctrlValue = ctrl.value;
const ctrlValueKey = Object.keys(ctrlValue)[0];
ctrl.setValue({
[ctrlValueKey]: model.value
});
} else if (this.formBuilderService.isQualdropGroup(model)) {
const ctrl = formArrayControl.controls[formArrayControl.length - 1];
const ctrlKey = Object.keys(ctrl.value).find((key: string) => isNotEmpty(key.match(QUALDROP_GROUP_REGEX)));
const valueKey = Object.keys(value).find((key: string) => isNotEmpty(key.match(QUALDROP_GROUP_REGEX)));
if (ctrlKey !== valueKey) {
Object.defineProperty(value, ctrlKey, Object.getOwnPropertyDescriptor(value, valueKey));
delete value[valueKey];
}
ctrl.setValue(value);
} else {
formArrayControl.controls[formArrayControl.length - 1].setValue(value);
}
// Clear the topmost field by removing the filled out version and inserting a new, empty version.
// Doing it this way ensures an empty value of the correct type is added without a bunch of ifs here
this.formBuilderService.removeFormArrayGroup(0, formArrayControl, arrayContext);
this.formBuilderService.insertFormArrayGroup(0, formArrayControl, arrayContext);
// Tell the formService that it should rerender.
this.formBuilderService.insertFormArrayGroup(index, formArrayControl, arrayContext);
this.addArrayItem.emit(this.getEvent($event, arrayContext, index, 'add'));
this.formService.changeForm(this.formId, this.formModel);
}