andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

form validation for new dashboard dialog

Browse Source
This commit is contained in:
Andreas Huber
2023-03-14 20:09:36 +01:00
parent 882f04d893
commit e543e0b388
4 changed files with 35 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
pdb-js/src/app/dashboard-page/dashboard-page.component.ts
View File

@@ -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) => {

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

@@ -3,18 +3,27 @@
overflow: hidden;
}
</style>
<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>
</mat-form-field>
<mat-form-field class="pdb-form-full-width">
<mat-label>Description</mat-label>
<textarea matInput [(ngModel)]="data.description"></textarea>
</mat-form-field>
</div>
<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>
</div>
<form [formGroup]="registerForm" >
<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 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" maxlength="65535" formControlName="description"></textarea>
</mat-form-field>
</div>
<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()"
[disabled]="!registerForm.valid">Save</button>
</div>
</form>

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

@@ -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>,

4
pdb-js/src/styles.scss
View File

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