import { Component, OnInit, Inject } from '@angular/core'; import { FormGroup, FormBuilder, Validators, ValidatorFn, AbstractControl } from '@angular/forms'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; import { GroupDetailData } from '@ucap-webmessenger/protocol-sync'; export interface EditGroupDialogData { title: string; group: GroupDetailData; } export interface EditGroupDialogResult { choice: boolean; groupName: string; group: GroupDetailData; } @Component({ selector: 'app-layout-messenger-edit-group', templateUrl: './edit-group.dialog.component.html', styleUrls: ['./edit-group.dialog.component.scss'] }) export class EditGroupDialogComponent implements OnInit { groupName: string; inputForm: FormGroup; constructor( public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: EditGroupDialogData, private formBuilder: FormBuilder ) {} ngOnInit(): void { this.inputForm = this.formBuilder.group({ groupName: [ this.data.group.name, [Validators.required, this.checkSpecialCharacter()] ] }); } checkSpecialCharacter(): ValidatorFn { return (control: AbstractControl): { [key: string]: any } | null => { const forbidden = /[\{\}\[\]\/?.;:|\)*~`!^+<>@\#$%&\\\=\(\'\"]/g.test( control.value ); return forbidden ? { groupName: { value: control.value } } : null; }; } onClickChoice(choice: boolean): void { this.dialogRef.close({ choice, groupName: this.inputForm.get('groupName').value, group: this.data.group }); } }