diff --git a/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts b/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts index eb13bb02c..1692cb1f7 100644 --- a/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts +++ b/dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts @@ -1,6 +1,7 @@ -import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; +import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit } from "@angular/core"; import { FormControl } from "@angular/forms"; import { AngularEditorConfig } from "@kolkov/angular-editor"; +import { Subscription } from "rxjs"; @Component({ selector: 'rich-text-editor-component', @@ -21,7 +22,7 @@ import { AngularEditorConfig } from "@kolkov/angular-editor"; // TODO: performance issue with this control. changed the change detection strategy in case it improves changeDetection: ChangeDetectionStrategy.OnPush }) -export class RichTextEditorComponent { +export class RichTextEditorComponent implements OnInit, OnDestroy { @Input() form: FormControl; @Input() id: string = "editor1"; @Input() placeholder: string = "Enter text"; @@ -29,6 +30,9 @@ export class RichTextEditorComponent { @Input() wrapperClasses: string = ""; @Input() editable: boolean = true; + @Input() formTouchEvent: EventEmitter; + private formTouchSubscription: Subscription; + editorConfig: AngularEditorConfig = { editable: this.editable, spellcheck: true, @@ -72,8 +76,16 @@ export class RichTextEditorComponent { }; - ngOnInit() { - console.log('ngOnInit: '); + ngOnInit(): void { + if (this.formTouchEvent) { + this.observeFormStatus(); + } + } + + ngOnDestroy(): void { + if (this.formTouchSubscription) { + this.formTouchSubscription.unsubscribe(); + } } ngAfterContentInit() { @@ -85,4 +97,16 @@ export class RichTextEditorComponent { const text = $event.clipboardData.getData("text/plain"); window.document.execCommand("insertText", false, text); } + + private observeFormStatus(): void { + this.formTouchSubscription = this.formTouchEvent + .subscribe( + next => { + if(next) { + this.form.markAsTouched(); + this.form.updateValueAndValidity(); + } + } + ); + } } diff --git a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html index 6b862dd9b..9ae489a4a 100644 --- a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html +++ b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html @@ -47,7 +47,7 @@
{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}} *
- +
diff --git a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.ts b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.ts index 3681cd3f1..04db52f5c 100644 --- a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.ts +++ b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.ts @@ -1,6 +1,6 @@ import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; import { DatePipe } from '@angular/common'; -import { Component, OnInit } from '@angular/core'; +import { Component, EventEmitter, OnInit } from '@angular/core'; import { FormArray, UntypedFormArray, UntypedFormGroup } from '@angular/forms'; import { MatDialog } from '@angular/material/dialog'; import { ActivatedRoute, Router } from '@angular/router'; @@ -45,7 +45,7 @@ import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/ import { FilterService } from '@common/modules/text-filter/filter-service'; import { Guid } from '@common/types/guid'; import { TranslateService } from '@ngx-translate/core'; -import { interval } from 'rxjs'; +import { Observable, interval, of } from 'rxjs'; import { map, takeUntil } from 'rxjs/operators'; import { DmpEditorModel } from './dmp-editor.model'; import { DmpEditorResolver } from './dmp-editor.resolver'; @@ -65,6 +65,7 @@ export class DmpEditorComponent extends BaseEditor implemen item: Dmp; selectedBlueprint: DmpBlueprint; step: number = 0; + formTouchEvent: EventEmitter = new EventEmitter(); //Enums descriptionStatusEnum = DescriptionStatus; @@ -333,7 +334,13 @@ export class DmpEditorComponent extends BaseEditor implemen }); } - selectDefaultBlueprint() { + selectDefaultBlueprint(): void { + if (!(this.formGroup.get('label').value && this.formGroup.get('description').value)) { + this.formGroup.get('label').markAsTouched(); + this.formTouchEvent.emit(true); + return; + } + this.dmpBlueprintService.getSingle(this.configurationService.defaultBlueprintId, DmpEditorResolver.blueprintLookupFields()).pipe(takeUntil(this._destroyed)).subscribe(data => { this.selectedBlueprint = data; this.formGroup.get('blueprint').setValue(this.selectedBlueprint.id);