description template validation changes

This commit is contained in:
amentis 2024-02-07 18:44:17 +02:00
parent 0a473bfd04
commit 305729eb48
5 changed files with 47 additions and 33 deletions

View File

@ -1,15 +1,17 @@
<div class="row" *ngIf="form.get('data')"> <div class="row" *ngIf="form.get('data')">
<div class="col-12"> <div class="col-12">
<h5 style="font-weight: bold; display: inline-block; margin-right: 2em;">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-TITLE' <h5 style="font-weight: bold; display: inline-block; margin-right: 2em;">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-TITLE'
| translate}}</h5> | translate}}</h5>
<ng-container *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched"> <ng-container *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched">
<mat-icon class="text-danger translateY-3">warning_amber</mat-icon> <mat-icon class="text-danger translateY-3">warning_amber</mat-icon>
<small class="text-danger">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-RADIO-AT-LEAST-ONE-REQUIRED'| translate}}</small> <small class="text-danger">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-RADIO-AT-LEAST-ONE-REQUIRED'| translate}}</small>
</ng-container> </ng-container>
<mat-error *ngIf="form.get('data').get('options').dirty && form.get('data').get('options').hasError('required')">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-RADIO-AT-LEAST-ONE-REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="form.get('data').get('options').hasError('backendError')">{{form.get('data').get('options').getError('backendError').message}}</mat-error>
</div> </div>
<!-- <mat-form-field class="col-12"> <!-- <mat-form-field class="col-12">
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-PLACEHOLDER' | translate}}</mat-label> <mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-PLACEHOLDER' | translate}}</mat-label>
<input matInput type="string" <input matInput type="string"
[formControl]="form.get('data').get('label')"> [formControl]="form.get('data').get('label')">
</mat-form-field> --> </mat-form-field> -->
@ -17,14 +19,16 @@
<div class="col-12"> <div class="col-12">
<div *ngFor="let option of form.get('data').get('options')['controls'] index as i" class="row"> <div *ngFor="let option of form.get('data').get('options')['controls'] index as i" class="row">
<mat-form-field class="col"> <mat-form-field class="col">
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-LABEL' | translate}}</mat-label> <mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-LABEL' | translate}}</mat-label>
<input matInput type="string" [formControl]="option.get('label')"> <input matInput type="string" [formControl]="option.get('label')" required="true">
<mat-error *ngIf="option.get('label').hasError('backendError')">{{option.get('label').getError('backendError').message}}</mat-error> <mat-error *ngIf="option.get('label').hasError('backendError')">{{option.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="option.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="col"> <mat-form-field class="col">
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-VALUE' | translate}}</mat-label> <mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-VALUE' | translate}}</mat-label>
<input matInput type="string" [formControl]="option.get('value')"> <input matInput type="string" [formControl]="option.get('value')" required="true">
<mat-error *ngIf="option.get('value').hasError('backendError')">{{option.get('value').getError('backendError').message}}</mat-error> <mat-error *ngIf="option.get('value').hasError('backendError')">{{option.get('value').getError('backendError').message}}</mat-error>
<mat-error *ngIf="option.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<button mat-icon-button class="col-auto" (click)="deleteRow(i)" type="button" <button mat-icon-button class="col-auto" (click)="deleteRow(i)" type="button"
[disabled]="this.form.disabled"> [disabled]="this.form.disabled">

View File

@ -9,7 +9,7 @@
</ng-container> </ng-container>
</div> </div>
<mat-checkbox class="col-auto" [formControl]="this.form.get('data').get('multipleSelect')"> <mat-checkbox class="col-auto" [formControl]="this.form.get('data').get('multipleSelect')">
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-MULTIPLE-SELECT' | translate}} {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-MULTIPLE-WORDLIST' | translate}}
<mat-error *ngIf="form.get('data').get('multipleSelect').hasError('backendError')">{{form.get('data').get('multipleSelect').getError('backendError').message}}</mat-error> <mat-error *ngIf="form.get('data').get('multipleSelect').hasError('backendError')">{{form.get('data').get('multipleSelect').getError('backendError').message}}</mat-error>
</mat-checkbox> </mat-checkbox>
@ -36,6 +36,8 @@
</button> </button>
</div> </div>
</div> </div>
<mat-error *ngIf="form.get('data').get('options').dirty && form.get('data').get('options').hasError('required')">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-RADIO-AT-LEAST-ONE-REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="form.get('data').get('options').hasError('backendError')">{{form.get('data').get('options').getError('backendError').message}}</mat-error>
<div class="col-auto"><button mat-icon-button (click)="addNewRow()"> <div class="col-auto"><button mat-icon-button (click)="addNewRow()">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
</button></div> </button></div>

View File

@ -65,7 +65,7 @@
[hasFocus]="fieldset.get('id').value === selectedFieldSetId" [hasFocus]="fieldset.get('id').value === selectedFieldSetId"
[datasetProfileId]="datasetProfileId" [datasetProfileId]="datasetProfileId"
[validationErrorModel]="validationErrorModel" [validationErrorModel]="validationErrorModel"
[rootPath]="rootPath"> [rootPath]="rootPath + 'fieldSets[' + i + '].'">
</app-description-template-editor-composite-field-component> </app-description-template-editor-composite-field-component>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>

View File

@ -616,6 +616,10 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
section.ordinal = sectionsArray.length; section.ordinal = sectionsArray.length;
} }
//store rootPath for next levels/components
this.rootPath = 'definition.pages['+ pageIndex +'].sections[' + sectionsArray.length + '].';
sectionsArray.push(section.buildForm({ rootPath: 'definition.pages['+ pageIndex +'].sections[' + sectionsArray.length + '].' })); sectionsArray.push(section.buildForm({ rootPath: 'definition.pages['+ pageIndex +'].sections[' + sectionsArray.length + '].' }));
// this.form.updateValueAndValidity(); // this.form.updateValueAndValidity();
@ -634,7 +638,6 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
sectionIndexes.forEach(index => { sectionIndexes.forEach(index => {
parentSectionRootPath = parentSectionRootPath + 'sections[' + index +'].' parentSectionRootPath = parentSectionRootPath + 'sections[' + index +'].'
}); });
}
sectionsArray = parent.form.get('sections') as UntypedFormArray; sectionsArray = parent.form.get('sections') as UntypedFormArray;
@ -646,9 +649,13 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
section.ordinal = sectionsArray.length; section.ordinal = sectionsArray.length;
} }
//store rootPath for next levels/components
this.rootPath = 'definition.pages['+ pageIndex +'].'+ parentSectionRootPath;
sectionsArray.push(section.buildForm({ rootPath: 'definition.pages['+ pageIndex +'].' + parentSectionRootPath + 'sections[' + sectionsArray.length + '].' })); sectionsArray.push(section.buildForm({ rootPath: 'definition.pages['+ pageIndex +'].' + parentSectionRootPath + 'sections[' + sectionsArray.length + '].' }));
// (child.form.parent as FormArray).push(section.buildForm()); // (child.form.parent as FormArray).push(section.buildForm());
}
} else { } else {
console.error('Section can only be child of a page or another section'); console.error('Section can only be child of a page or another section');
} }
@ -687,8 +694,6 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
field.ordinal = 0;//first filed in the fields list field.ordinal = 0;//first filed in the fields list
const fieldSetsArray = parent.form.get('fieldSets') as UntypedFormArray const fieldSetsArray = parent.form.get('fieldSets') as UntypedFormArray
//store rootPath for next levels/components
this.rootPath = 'definition.pages['+ pageIndex +'].'+ parentSectionRootPath+ 'fieldSets[' + fieldSetsArray.length + '].';
const fieldForm = field.buildForm({ rootPath: this.rootPath+ 'fields[' + 0 + '].'}); const fieldForm = field.buildForm({ rootPath: this.rootPath+ 'fields[' + 0 + '].'});
//give fieldset id and ordinal //give fieldset id and ordinal

View File

@ -60,8 +60,8 @@ export class DescriptionTemplateEditorModel extends BaseEditorModel implements D
this.validationErrorModel this.validationErrorModel
).fromModel(item).buildForm({ ).fromModel(item).buildForm({
rootPath: `users[${index}].` rootPath: `users[${index}].`
}), context.getValidation('users') })
) ), context.getValidation('users').validators
), ),
hash: [{ value: this.hash, disabled: disabled }, context.getValidation('hash').validators] hash: [{ value: this.hash, disabled: disabled }, context.getValidation('hash').validators]
}); });
@ -1233,8 +1233,9 @@ export class DescriptionTemplateExternalSelectDataEditorModel extends Descriptio
(this.sources ?? []).map( (this.sources ?? []).map(
(item, index) => item.buildForm({ (item, index) => item.buildForm({
rootPath: `${rootPath}sources[${index}].` rootPath: `${rootPath}sources[${index}].`
}), context.getValidation('sources') })
))); ), context.getValidation('sources').validators
));
return formGroup; return formGroup;
} }
@ -1583,8 +1584,9 @@ export class DescriptionTemplateRadioBoxDataEditorModel extends DescriptionTempl
this.validationErrorModel this.validationErrorModel
).fromModel(item).buildForm({ ).fromModel(item).buildForm({
rootPath: `${rootPath}options[${index}].` rootPath: `${rootPath}options[${index}].`
}), context.getValidation('options') })
))); ), context.getValidation('options').validators
));
return formGroup; return formGroup;
} }
@ -1729,8 +1731,9 @@ export class DescriptionTemplateSelectDataEditorModel extends DescriptionTemplat
this.validationErrorModel this.validationErrorModel
).fromModel(item).buildForm({ ).fromModel(item).buildForm({
rootPath: `${rootPath}options[${index}].` rootPath: `${rootPath}options[${index}].`
}), context.getValidation('options') })
))); ), context.getValidation('options').validators
));
return formGroup; return formGroup;
} }