description template validation changes
This commit is contained in:
parent
0a473bfd04
commit
305729eb48
|
@ -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">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue