File
Metadata
| selector |
mev-edit-ws-dialog |
| styleUrls |
./edit-ws-dialog.component.scss |
| templateUrl |
./edit-ws-dialog.component.html |
Methods
|
getErrorMessage
|
getErrorMessage()
|
|
|
|
Returns : "" | "Required field" | "Not a valid email"
|
|
Public
data
|
Type : any
|
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 { FormControl, Validators } from '@angular/forms';
import { WorkspaceService } from '@workspace-manager/services/workspace.service';
@Component({
selector: 'mev-edit-ws-dialog',
templateUrl: './edit-ws-dialog.component.html',
styleUrls: ['./edit-ws-dialog.component.scss']
})
export class EditWSDialogComponent {
constructor(
public dialogRef: MatDialogRef<EditWSDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
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();
}
stopEdit(): void {
this.workspaceService.updateWorkspace(this.data);
}
}
<div class="container">
<h3 mat-dialog-title>Edit 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 [type]="submit" [disabled]="!formControl.valid" [mat-dialog-close]="1" (click)="stopEdit()"
mat-raised-button color="accent">Save</button>
<button mat-button (click)="onNoClick()" tabindex="-1">Cancel</button>
</div>
</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