fixed dmp editor first step validation

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<any>;
+	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();
+					}
+				}
+			);
+	}
 }

dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html

@@ -47,7 +47,7 @@
 					<div class="row">
 						<div class="heading2 col-12">{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}} *</div>
 						<div class="col-12">
-							<rich-text-editor-component [form]="formGroup.get('description')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" [required]="true">
+							<rich-text-editor-component [form]="formGroup.get('description')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" [required]="true" [formTouchObservable]="formTouchObservable">
 							</rich-text-editor-component>
 						</div>
 					</div>

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<DmpEditorModel, Dmp> implemen
 	item: Dmp;
 	selectedBlueprint: DmpBlueprint;
 	step: number = 0;
+	formTouchEvent: EventEmitter<any> = new EventEmitter<any>();
 
 	//Enums
 	descriptionStatusEnum = DescriptionStatus;
@@ -333,7 +334,14 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
 		});
 	}
 
-	selectDefaultBlueprint() {
+	selectDefaultBlueprint(): void {
+		if (!(this.formGroup.get('label').value && this.formGroup.get('description').value && this.formGroup.get('blueprint').value)) {
+			this.formGroup.get('label').markAsTouched();
+			this.formGroup.get('blueprint').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);