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');