From f08d8e2e017d8b30e85fa81e55876b02dd7e2fc6 Mon Sep 17 00:00:00 2001 From: George Kalampokis Date: Tue, 13 Oct 2020 12:55:11 +0300 Subject: [PATCH] When checking for Form Validation errors if the control has no nativeElement then pass as name it's formGroup key, also added some additional checkup for the placeholder parser in the FormValidationComponent --- .../app/ui/dmp/editor/dmp-editor.component.ts | 1 + ...form-validation-errors-dialog.component.ts | 32 ++++++++++++------- 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts index 1a9925591..e37083cbc 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts +++ b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts @@ -413,6 +413,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC } public isFormValid() { + this.formGroup.markAllAsTouched(); return this.formGroup.valid; // return this.formGroup.get('label').valid && this.formGroup.get('profiles').valid && // (this.formGroup.get('funder').get('label').valid || this.formGroup.get('funder').get('existFunder').valid) && diff --git a/dmp-frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.ts b/dmp-frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.ts index 400ecba9b..b01d262f7 100644 --- a/dmp-frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.ts +++ b/dmp-frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.ts @@ -29,15 +29,23 @@ export class FormValidationErrorsDialogComponent { this.dialogRef.close(); } - public getErrors(formControl: AbstractControl): string[] { + public getErrors(formControl: AbstractControl, key?: string): string[] { const errors: string[] = []; if (formControl instanceof FormControl) { - if (formControl.invalid && formControl['nativeElement']) { errors.push(...this.getErrorMessage(formControl)); } + if (formControl.errors !== null) { + let name: string; + if ((formControl).nativeElement !== undefined && (formControl).nativeElement !== null) { + name = this.getPlaceHolder(formControl); + } else { + name = key; + } + errors.push(...this.getErrorMessage(formControl, name)); + } } else if (formControl instanceof FormGroup) { if (formControl.errors) { (errors.push(...Object.values(formControl.errors).map(x => x.message) as string[])); } - Object.keys(formControl.controls).forEach(item => { - const control = formControl.get(item); - errors.push(...this.getErrors(control)); + Object.keys(formControl.controls).forEach(key => { + const control = formControl.get(key); + errors.push(...this.getErrors(control, key)); }); } else if (formControl instanceof FormArray) { if (formControl.errors) { (errors.push(...Object.values(formControl.errors).map(x => x.message) as string[])); } @@ -48,21 +56,21 @@ export class FormValidationErrorsDialogComponent { return errors; } - getErrorMessage(formControl: FormControl): string[] { + getErrorMessage(formControl: FormControl, name: string): string[] { const errors: string[] = []; Object.keys(formControl.errors).forEach(key => { - if (key === 'required') { errors.push(this.language.instant(this.getPlaceHolder(formControl) + ": " + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.REQUIRED'))); } + if (key === 'required') { errors.push(this.language.instant(name + ": " + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.REQUIRED'))); } // if (key === 'required') { errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + this.getPlaceHolder(formControl) + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.REQUIRED')); } - else if (key === 'email') { errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + this.getPlaceHolder(formControl) + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.EMAIL')); } - else if (key === 'min') { errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + this.getPlaceHolder(formControl) + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.MIN-VALUE', { 'min': formControl.getError('min').min })); } - else if (key === 'max') { errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + this.getPlaceHolder(formControl) + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.MAX-VALUE', { 'max': formControl.getError('max').max })); } - else { errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + this.getPlaceHolder(formControl) + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + formControl.errors[key].message); } + else if (key === 'email') { errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + name + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.EMAIL')); } + else if (key === 'min') { errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + name + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.MIN-VALUE', { 'min': formControl.getError('min').min })); } + else if (key === 'max') { errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + name + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.MAX-VALUE', { 'max': formControl.getError('max').max })); } + else { errors.push(this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.THIS-FIELD') + ' "' + name + '" ' + this.language.instant('GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.HAS-ERROR') + ', ' + formControl.errors[key].message); } }); return errors; } getPlaceHolder(formControl: any): string { - if (formControl.nativeElement.localName === 'input') { + if (formControl.nativeElement.localName === 'input' || formControl.nativeElement.localName === 'textarea') { return formControl.nativeElement.getAttribute('placeholder'); } else if (formControl.nativeElement.localName === 'mat-select') { return formControl.nativeElement.getAttribute('aria-label');