File
Metadata
| selector |
mev-add-ws-dialog |
| styleUrls |
./add-ws-dialog.component.scss |
| templateUrl |
./add-ws-dialog.component.html |
Methods
|
Public
confirmAdd
|
confirmAdd()
|
|
|
|
|
|
getErrorMessage
|
getErrorMessage()
|
|
|
|
Returns : "" | "Required field" | "Not a valid email"
|
|
Public
data
|
Type : Workspace
|
Decorators :
@Inject(MAT_DIALOG_DATA)
|
|
|
|
formControl
|
Default value : new FormControl('', [
Validators.required
// Validators.email,
])
|
|
|
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Component, Inject } from '@angular/core';
import { WorkspaceService } from '@workspace-manager/services/workspace.service';
import { FormControl, Validators } from '@angular/forms';
import { Workspace } from '@workspace-manager/models/workspace';
@Component({
selector: 'mev-add-ws-dialog',
templateUrl: './add-ws-dialog.component.html',
styleUrls: ['./add-ws-dialog.component.scss']
})
export class AddWSDialogComponent {
constructor(
public dialogRef: MatDialogRef<AddWSDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: Workspace,
public workspaceService: WorkspaceService
) {}
formControl = new FormControl('', [
Validators.required
// Validators.email,
]);
getErrorMessage() {
return this.formControl.hasError('required')
? 'Required field'
: this.formControl.hasError('email')
? 'Not a valid email'
: '';
}
submit() {
// empty stuff
}
onNoClick(): void {
this.dialogRef.close();
}
public confirmAdd(): void {
this.workspaceService.addWorkspace(this.data);
}
}
<div class="container">
<h3 mat-dialog-title>Add new workspace</h3>
<form class="mat-dialog-content" (ngSubmit)="submit" #formControl="ngForm">
<!--div class="form">
<mat-form-field color="accent">
<input matInput #input class="form-control" placeholder="Id" [(ngModel)]="data.id" name="id" required >
<mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
</div-->
<div class="form">
<mat-form-field color="accent">
<input matInput #input class="form-control" placeholder="Workspace name" [(ngModel)]="data.workspace_name" name="workspace_name" required >
<mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
</div>
<div mat-dialog-actions>
<button mat-button mat-raised-button color="accent" [type]="submit" [disabled]="!formControl.valid" [mat-dialog-close]="1" (click)="confirmAdd()">Save</button>
<button mat-button (click)="onNoClick()" tabindex="-1">Cancel</button>
</div>
<p></p>
</form>
</div>
.container {
display: flex;
flex-direction: column;
min-width: 450px;
}
.container > * {
width: 100%;
}
.mat-dialog-content {
max-height: none;
overflow: visible;
}
.form {
display: flex;
padding-top: 6px;
}
.mat-form-field {
font-size: 16px;
flex-grow: 1;
}
Legend
Html element with directive