|
@@ -151,20 +151,11 @@ export class DynaformComponent implements OnInit, OnChanges {
|
|
};
|
|
};
|
|
}
|
|
}
|
|
|
|
|
|
- getRepeatingFieldTemplateContext(repeatingFieldrName: string, index: number): DynarowContext {
|
|
|
|
- const rfFormArray = this.formGroup.get(repeatingFieldrName) as FormArray;
|
|
|
|
- const result = {
|
|
|
|
- control: rfFormArray.at(index),
|
|
|
|
- meta: this.formMetaData[repeatingFieldrName]['meta'][index]
|
|
|
|
- };
|
|
|
|
- return result;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- getRepeatingContainerTemplateContext(repeatingContainerName: string, index: number): DynarowContext {
|
|
|
|
- const rcFormArray = this.formGroup.get(repeatingContainerName) as FormArray;
|
|
|
|
|
|
+ getRepeatingTemplateContext(name: string, index: number): DynarowContext {
|
|
|
|
+ const rcFormArray = this.formGroup.get(name) as FormArray;
|
|
const result = {
|
|
const result = {
|
|
control: rcFormArray.at(index),
|
|
control: rcFormArray.at(index),
|
|
- meta: this.formMetaData[repeatingContainerName]['meta'][index]
|
|
|
|
|
|
+ meta: this.formMetaData[name]['meta'][index]
|
|
};
|
|
};
|
|
return result;
|
|
return result;
|
|
}
|
|
}
|
|
@@ -177,7 +168,7 @@ export class DynaformComponent implements OnInit, OnChanges {
|
|
return `row-${fieldTypeClass}${containerClass}${errorClass}`;
|
|
return `row-${fieldTypeClass}${containerClass}${errorClass}`;
|
|
}
|
|
}
|
|
|
|
|
|
- getRCLabel(repeatingContainerName: string, index: number): string {
|
|
|
|
|
|
+ getRepeatingContainerLabel(repeatingContainerName: string, index: number): string {
|
|
// Get the label for a repeating container,
|
|
// Get the label for a repeating container,
|
|
// used on buttons to switch between containers (when only one is shown at a time i.e display = 'SINGLE')
|
|
// used on buttons to switch between containers (when only one is shown at a time i.e display = 'SINGLE')
|
|
const rcMeta = this.formMetaData[repeatingContainerName];
|
|
const rcMeta = this.formMetaData[repeatingContainerName];
|
|
@@ -193,84 +184,78 @@ export class DynaformComponent implements OnInit, OnChanges {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- focusContainer(repeatingContainerName: string, index: number): void {
|
|
|
|
|
|
+ focusContainer(name: string, index: number): void {
|
|
// Show a particular member of a Repeating Container Group (used when only one is shown at a time i.e display = 'SINGLE')
|
|
// Show a particular member of a Repeating Container Group (used when only one is shown at a time i.e display = 'SINGLE')
|
|
- const rcMeta = this.formMetaData[repeatingContainerName];
|
|
|
|
|
|
+ const rcMeta = this.formMetaData[name];
|
|
rcMeta.meta = rcMeta.meta.map( (container, i) => ({ ...container, focussed: i === index }) );
|
|
rcMeta.meta = rcMeta.meta.map( (container, i) => ({ ...container, focussed: i === index }) );
|
|
}
|
|
}
|
|
|
|
|
|
- // RC = Repeating Container
|
|
|
|
- addRCMemberAllowed(repeatingContainerName: string): boolean {
|
|
|
|
- const rcMeta = this.formMetaData[repeatingContainerName];
|
|
|
|
- return typeof rcMeta.maxRepeat === 'number' && rcMeta.maxRepeat > rcMeta.meta.length;
|
|
|
|
|
|
+ addAllowed(name: string): boolean {
|
|
|
|
+ const meta = this.formMetaData[name];
|
|
|
|
+ return typeof meta.maxRepeat === 'number' && meta.maxRepeat > meta.meta.length;
|
|
}
|
|
}
|
|
|
|
|
|
// Maybe move the AddRF and deleteRF funtions to _formdata-utils.ts ?
|
|
// Maybe move the AddRF and deleteRF funtions to _formdata-utils.ts ?
|
|
- addRFMember(repeatingFieldName: string): void {
|
|
|
|
|
|
+ addRepeatingFieldMember(name: string): void {
|
|
// (1) Check that we can still add controls
|
|
// (1) Check that we can still add controls
|
|
- if (!this.addRCMemberAllowed(repeatingFieldName)) {
|
|
|
|
|
|
+ if (!this.addAllowed(name)) {
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
// (2) Add metadata for new container member
|
|
// (2) Add metadata for new container member
|
|
- const rfMeta = this.formMetaData[repeatingFieldName];
|
|
|
|
|
|
+ const rfMeta = this.formMetaData[name];
|
|
const fieldTemplate = cloneDeep(rfMeta.__fieldTemplate);
|
|
const fieldTemplate = cloneDeep(rfMeta.__fieldTemplate);
|
|
- const i = this.formMetaData[repeatingFieldName].meta.length;
|
|
|
|
|
|
+ const i = this.formMetaData[name].meta.length;
|
|
fieldTemplate.name = `group${i+1}`; // CHECK
|
|
fieldTemplate.name = `group${i+1}`; // CHECK
|
|
rfMeta.meta.push(fieldTemplate);
|
|
rfMeta.meta.push(fieldTemplate);
|
|
// (3) Add FormControl to FormArray
|
|
// (3) Add FormControl to FormArray
|
|
const newFormControl = buildFormControl(fieldTemplate);
|
|
const newFormControl = buildFormControl(fieldTemplate);
|
|
- (this.formGroup.get(repeatingFieldName) as FormArray).push(newFormControl);
|
|
|
|
|
|
+ (this.formGroup.get(name) as FormArray).push(newFormControl);
|
|
}
|
|
}
|
|
|
|
|
|
- delateRFMember(repeatingFieldName: string, index: number): void {
|
|
|
|
- this.deleteRCMember(repeatingFieldName, index);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
-
|
|
|
|
// Maybe move the AddRC and deleteRC funtions to _formdata-utils.ts ?
|
|
// Maybe move the AddRC and deleteRC funtions to _formdata-utils.ts ?
|
|
- addRCMember(repeatingContainerName: string): void {
|
|
|
|
|
|
+ addRepeatingContainerMember(name: string): void {
|
|
// (1) Check that we can still add controls
|
|
// (1) Check that we can still add controls
|
|
- if (!this.addRCMemberAllowed(repeatingContainerName)) {
|
|
|
|
|
|
+ if (!this.addAllowed(name)) {
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
// (2) Add metadata for new container member
|
|
// (2) Add metadata for new container member
|
|
- const rcMeta = this.formMetaData[repeatingContainerName];
|
|
|
|
|
|
+ const rcMeta = this.formMetaData[name];
|
|
const containerTemplate = cloneDeep(rcMeta.__containerTemplate);
|
|
const containerTemplate = cloneDeep(rcMeta.__containerTemplate);
|
|
- const i = this.formMetaData[repeatingContainerName].meta.length;
|
|
|
|
|
|
+ const i = this.formMetaData[name].meta.length;
|
|
containerTemplate.name = `group${i+1}`;
|
|
containerTemplate.name = `group${i+1}`;
|
|
rcMeta.meta.push(containerTemplate);
|
|
rcMeta.meta.push(containerTemplate);
|
|
// (3) Add FormGroup for new container member
|
|
// (3) Add FormGroup for new container member
|
|
const buildFormGroup = buildFormGroupFunctionFactory(new FormBuilder());
|
|
const buildFormGroup = buildFormGroupFunctionFactory(new FormBuilder());
|
|
const newFormGroup = buildFormGroup(containerTemplate.meta);
|
|
const newFormGroup = buildFormGroup(containerTemplate.meta);
|
|
- (this.formGroup.get(repeatingContainerName) as FormArray).push(newFormGroup);
|
|
|
|
|
|
+ (this.formGroup.get(name) as FormArray).push(newFormGroup);
|
|
// (4) Focus new container member if display = 'SINGLE' (i.e. we're only showing one at once)
|
|
// (4) Focus new container member if display = 'SINGLE' (i.e. we're only showing one at once)
|
|
if (rcMeta.display === 'SINGLE') {
|
|
if (rcMeta.display === 'SINGLE') {
|
|
- this.focusContainer(repeatingContainerName, i);
|
|
|
|
|
|
+ this.focusContainer(name, i);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- deleteRCMemberAllowed(repeatingContainerName: string): boolean {
|
|
|
|
- const rcMeta = this.formMetaData[repeatingContainerName];
|
|
|
|
- return typeof rcMeta.minRepeat === 'number' && rcMeta.minRepeat < rcMeta.meta.length;
|
|
|
|
|
|
+ deleteAllowed(name: string): boolean {
|
|
|
|
+ const meta = this.formMetaData[name];
|
|
|
|
+ return typeof meta.minRepeat === 'number' && meta.minRepeat < meta.meta.length;
|
|
}
|
|
}
|
|
|
|
|
|
// Maybe move the AddRC and deleteRC funtions to _formdata-utils.ts ?
|
|
// Maybe move the AddRC and deleteRC funtions to _formdata-utils.ts ?
|
|
- deleteRCMember(repeatingContainerName: string, index: number): void {
|
|
|
|
|
|
+ deleteRepeatingMember(name: string, index: number): void {
|
|
// (1) Check that we can still delete controls
|
|
// (1) Check that we can still delete controls
|
|
- if (!this.deleteRCMemberAllowed(repeatingContainerName)) {
|
|
|
|
|
|
+ if (!this.deleteAllowed(name)) {
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
// (2) Delete from the metadata, and rename the groups
|
|
// (2) Delete from the metadata, and rename the groups
|
|
- const rcMeta = this.formMetaData[repeatingContainerName];
|
|
|
|
|
|
+ const rcMeta = this.formMetaData[name];
|
|
const metaArr = rcMeta.meta;
|
|
const metaArr = rcMeta.meta;
|
|
const newMetaArr = [ ...metaArr.slice(0, index), ...metaArr.slice(index + 1) ]
|
|
const newMetaArr = [ ...metaArr.slice(0, index), ...metaArr.slice(index + 1) ]
|
|
.map((m, i) => { m.name = `group${i+1}`; return m; });
|
|
.map((m, i) => { m.name = `group${i+1}`; return m; });
|
|
rcMeta.meta = newMetaArr;
|
|
rcMeta.meta = newMetaArr;
|
|
// (3) Delete the corresponding FormGroup from the FormArray
|
|
// (3) Delete the corresponding FormGroup from the FormArray
|
|
- (this.formGroup.get(repeatingContainerName) as FormArray).removeAt(index);
|
|
|
|
|
|
+ (this.formGroup.get(name) as FormArray).removeAt(index);
|
|
// (4) Focus the last if display = 'SINGLE' (i.e. we're only showing one at once)
|
|
// (4) Focus the last if display = 'SINGLE' (i.e. we're only showing one at once)
|
|
if (rcMeta.display === 'SINGLE') {
|
|
if (rcMeta.display === 'SINGLE') {
|
|
- this.focusContainer(repeatingContainerName, newMetaArr.length - 1);
|
|
|
|
|
|
+ this.focusContainer(name, newMetaArr.length - 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|