pdb-js/src/app/dashboard-page/dashboard-page.component.ts

@@ -46,7 +46,8 @@ export class DashboardPageComponent implements OnInit {
 
   createNewDashboard() {
     const dialogRef = this.dialog.open(NewDashboardComponent, {
-      data: {name: "", description: ""}
+      data: {name: "", description: ""},
+      width: '30em'
     });
 
     dialogRef.afterClosed().subscribe((result: DashboardCreationData) => {

pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.html

@@ -3,18 +3,27 @@
     overflow: hidden;
   }
 </style>
-<h1 mat-dialog-title>Create a new dashboard</h1>
+<form [formGroup]="registerForm" >
-<div mat-dialog-content>
+  <h1 mat-dialog-title>Create a new dashboard</h1>
+  <div mat-dialog-content>
     <mat-form-field class="pdb-form-full-width">
       <mat-label>Name</mat-label>
-    <input matInput [(ngModel)]="data.name" #name focus>
+      <input matInput [(ngModel)]="data.name" #name formControlName="name" focus maxlength="64" required="required" />
+      <mat-error>Name must be between one and 64 characters.</mat-error>
     </mat-form-field>
     <mat-form-field class="pdb-form-full-width">
       <mat-label>Description</mat-label>
-    <textarea matInput [(ngModel)]="data.description"></textarea>
+      <textarea matInput [(ngModel)]="data.description" maxlength="65535" formControlName="description"></textarea>
     </mat-form-field>
-</div>
+  </div>
-<div mat-dialog-actions align="end">
+  <div mat-dialog-actions align="end">
     <button mat-button mat-dialog-close>Cancel</button>
-  <button class="save-button" mat-button mat-dialog-close (click)="onSaveClick()" cdkFocusInitial>Save</button>
+    <button 
-</div>
+      class="save-button" 
+      mat-button 
+      mat-dialog-close 
+      (click)="onSaveClick()" 
+      [disabled]="!registerForm.valid">Save</button>
+  </div>
+</form>
+  

pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.ts

@@ -1,6 +1,7 @@
 import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import { DashboardCreationData } from 'src/app/dashboard.service';
+import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-new-dashboard',
@@ -8,6 +9,12 @@ import { DashboardCreationData } from 'src/app/dashboard.service';
 })
 export class NewDashboardComponent implements OnInit {
 
+
+  registerForm = new FormGroup({
+    name: new FormControl('', [Validators.pattern(/^[^\s]+.{0,63}$/), Validators.required]),
+    description: new FormControl('', [Validators.maxLength(65535)]),
+  });
+
   @ViewChild('name') nameInput!: ElementRef;
 
   constructor(public dialogRef: MatDialogRef<NewDashboardComponent>,

pdb-js/src/styles.scss

@@ -190,8 +190,8 @@ mat-form-field.pdb-form-mid {
 mat-form-field.pdb-form-wide {
   width: 10em;
 }
-.mat-mdc-form-field-subscript-wrapper  {
+pdb-visualization-page .mat-mdc-form-field-subscript-wrapper  {
-  display: none;
+  display: none;/**/
 }
 
 .errorPanel {