import {Component, Inject, OnInit} from '@angular/core';
import {AbstractControl, FormControl, FormGroup, Validators} from '@angular/forms';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
import {Contact, IContactDialogData} from '../../../interfaces';
import {Methods} from '../../../enums';
const EMAIL_REGEX = new RegExp(['^(([^<>()[\\]\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\.,;:\\s@\"]+)*)',
'|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.',
'[0-9]{1,3}\])|(([a-zA-Z\\-0-9]+\\.)+',
'[a-zA-Z]{2,}))$'].join(''));
const PHONE_NUMBER_REGEX = new RegExp(/^\+(?:[0-9] ?){6,14}[0-9]$/);
@Component({
selector: 'mat-contact-dialog',
templateUrl: './mat-contact-dialog.component.html',
styleUrls: ['./mat-contact-dialog.component.scss']
})
export class MatContactDialogComponent implements OnInit {
newContactForm: FormGroup;
nameFormControl: AbstractControl;
emailFormControl: AbstractControl;
phoneNumberFormControl: AbstractControl;
phoneNumber: string;
methods = Methods;
constructor(public dialogRef: MatDialogRef<MatContactDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: IContactDialogData) {
console.log('data = ', this.data);
}
ngOnInit() {
this.newContactForm = new FormGroup({
name: this.nameFormControl = new FormControl('',
[
Validators.required,
Validators.minLength(2),
Validators.maxLength(30),
]),
email: this.emailFormControl = new FormControl('',
[
Validators.required,
Validators.pattern(EMAIL_REGEX)
]),
phoneNumber: this.phoneNumberFormControl = new FormControl('',
[Validators.pattern(PHONE_NUMBER_REGEX)])
});
}
save() {
const contact: Contact = {
name: this.nameFormControl.value,
email: this.emailFormControl.value,
phoneNumber: this.phoneNumber,
metadata: {
created_at: new Date(),
updated_at: new Date()
}
};
const result: IContactDialogData = {
method: Methods.POST,
contact: contact
};
this.dialogRef.close(result);
}
delete() {
const result: IContactDialogData = {
method: Methods.DELETE,
contact: {name: 'asd', email: 'ycs'}
};
this.dialogRef.close(result);
}
}
<mat-toolbar color="primary">
<mat-toolbar-row>
New
<span class="fill-remaining"></span>
<button mat-icon-button
mat-dialog-close
matTooltip="close">
<mat-icon>close</mat-icon>
</button>
</mat-toolbar-row>
<mat-toolbar-row fxLayoutAlign="center center">
<avatar [email]="newContactForm.value.email"
[name]="newContactForm.value.name"
[displayType]="'circle'">
</avatar>
</mat-toolbar-row>
</mat-toolbar>
<form #form [formGroup]="newContactForm" (ngSubmit)="newContactForm.valid && save()">
<div fxLayout="column" fxLayoutAlign="center" class="contact-form">
<!--name-->
<mat-form-field appearance="outline">
<mat-label>Name</mat-label>
<input matInput
placeholder="Enter the contact name here"
minlength="2"
maxlength="30"
[formControl]="nameFormControl"
required>
<mat-icon matSuffix color="accent">person</mat-icon>
<mat-hint align="end" aria-live="polite">
{{newContactForm.value.name.length}} / 25
</mat-hint>
<mat-error *ngIf="nameFormControl.hasError('required')">
Name is required
</mat-error>
<mat-error *ngIf="nameFormControl.hasError('minlength')">
The name is too short!
</mat-error>
<mat-error *ngIf="nameFormControl.hasError('maxlength')">
The name is too long!
</mat-error>
</mat-form-field>
<!--email-->
<mat-form-field appearance="outline">
<mat-label>E-mail</mat-label>
<input matInput
type="email"
placeholder="e.g: user@domain.com"
[formControl]="emailFormControl">
<mat-icon matSuffix color="accent">email</mat-icon>
<mat-error *ngIf="emailFormControl.hasError('required')">
E-mail is required
</mat-error>
<mat-error *ngIf="emailFormControl.hasError('pattern')">
Please enter a valid e-mail address
</mat-error>
</mat-form-field>
<!--phone number-->
<mat-form-field appearance="outline">
<input matInput
type="number"
placeholder="e.g: +49-12345678"
[formControl]="phoneNumberFormControl">
<mat-icon matSuffix color="accent">phone</mat-icon>
<mat-hint align="end" aria-live="polite">
The phone number is international. Therefore, it should start with a + sign,
followed by the country code and national number
</mat-hint>
<mat-error *ngIf="phoneNumberFormControl.hasError('pattern')">
Please enter a valid phone number
</mat-error>
</mat-form-field>
<!--save-->
<button mat-raised-button
class="save-button"
type="submit"
color="accent"
[disabled]="newContactForm.invalid">
Save
</button>
<!--delete-->
<button *ngIf="data.method !== methods.POST"
mat-button
color="warn"
(click)="removeContact()"
[disabled]="newContactForm.invalid">
Remove
</button>
</div>
</form>
.fill-remaining {
flex: 1 1 auto;
}
.contact-form {
margin: 1rem;
}
.save-button {
margin-top: 50px;
}
::ng-deep div .avatar {
//width: 96px;
//line-height: 96px !important;
//height: 96px;
//font-size: 18px !important;
//max-width: 96px;
//max-height: 96px;
}
.ngx-avatar {
width: 96px;
min-width: 96px;
height: 96px;
line-height: 96px;
margin: 0 8px 0 0;
border-radius: 50%;
font-size: 17px;
font-weight: 500;
text-align: center;
color: #fff;
}