# 이슈처리 46, 226

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html

@@ -91,6 +91,7 @@
     <ucap-room-list-item
       *ngFor="let room of searchRoomList"
       [loginRes]="loginRes"
+      [isSelected]="(selectedRoomInfo$ | async)?.roomSeq === room.roomSeq"
       [roomInfo]="room"
       [roomUserInfo]="getRoomUserList(room)"
       [sessionVerinfo]="sessionVerinfo"

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.ts

@@ -64,6 +64,7 @@ import {
 } from '@ucap-webmessenger/ui';
 import { TranslateService } from '@ngx-translate/core';
 import { environment } from '../../../../../environments/environment';
+import { StringUtil } from '@ucap-webmessenger/core';
 
 export interface CreateChatDialogData {
   type?: string;
@@ -283,7 +284,7 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
       .subscribe();
 
     this.inputForm = this.formBuilder.group({
-      groupName: ['', [Validators.required, this.checkSpecialCharacter()]]
+      groupName: ['', [Validators.required, StringUtil.checkSpecialCharacter()]]
     });
 
     if (this.data.type === UserSelectDialogType.EditChatMember) {
@@ -293,15 +294,6 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
     this.currentTabIndex = 0;
   }
 
-  checkSpecialCharacter(): ValidatorFn {
-    return (control: AbstractControl): { [key: string]: any } | null => {
-      const forbidden = /[\{\}\[\]\/?.;:|\)*~`!^+<>@\#$%&\\\=\(\'\"]/g.test(
-        control.value
-      );
-      return forbidden ? { groupName: { value: control.value } } : null;
-    };
-  }
-
   ngOnDestroy(): void {
     if (!!this.roomSubscription) {
       this.roomSubscription.unsubscribe();

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.html

@@ -40,7 +40,7 @@
     <button
       mat-flat-button
       (click)="onClickChoice(true)"
-      [disabled]="this.inputForm.invalid"
+      [disabled]="inputForm.invalid"
       class="mat-primary"
     >
       {{ 'common.messages.yes' | translate }}

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.ts

@@ -8,6 +8,7 @@ import {
 } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { GroupDetailData } from '@ucap-webmessenger/protocol-sync';
+import { StringUtil } from '@ucap-webmessenger/core';
 
 export interface EditGroupDialogData {
   title: string;
@@ -39,20 +40,11 @@ export class EditGroupDialogComponent implements OnInit {
     this.inputForm = this.formBuilder.group({
       groupName: [
         this.data.group.name,
-        [Validators.required, this.checkSpecialCharacter()]
+        [Validators.required, StringUtil.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,

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html

@@ -17,35 +17,38 @@
         <span class="mat-fab__label">{{ 'group.addNew' | translate }}</span>
       </button>
       <div *ngIf="isShowAddGroupField" class="input-groupname-box">
-        <mat-form-field
+        <form name="inputForm" [formGroup]="inputForm" novalidate>
-          hintLabel="{{
+          <mat-form-field
-            'common.useOnlyForSpecialCharacter'
+            hintLabel="{{
-              | translate: { specialCharacter: '-,_' }
+              'common.useOnlyForSpecialCharacter'
-          }}"
+                | translate: { specialCharacter: '-,_' }
-        >
+            }}"
-          <input
-            matInput
-            #inputGroupName
-            type="text"
-            maxlength="20"
-            placeholder="{{ 'group.name' | translate }}"
-            value=""
-          />
-
-          <button
-            mat-button
-            matSuffix
-            mat-icon-button
-            aria-label="Clear"
-            (click)="inputGroupName.value = ''"
           >
-            <mat-icon>close</mat-icon>
+            <input
-          </button>
+              matInput
+              #inputGroupName
+              type="text"
+              maxlength="20"
+              placeholder="{{ 'group.name' | translate }}"
+              value=""
+              formControlName="groupName"
+            />
 
-          <mat-hint align="end"
+            <button
-            >{{ inputGroupName.value?.length || 0 }}/20</mat-hint
+              mat-button
-          >
+              matSuffix
-        </mat-form-field>
+              mat-icon-button
+              aria-label="Clear"
+              (click)="inputGroupName.value = ''"
+            >
+              <mat-icon>close</mat-icon>
+            </button>
+
+            <mat-hint align="end"
+              >{{ inputGroupName.value?.length || 0 }}/20</mat-hint
+            >
+          </mat-form-field>
+        </form>
 
         <div class="btn-box">
           <button mat-stroked-button (click)="onClickAddGroupCancel()">
@@ -56,6 +59,7 @@
             color="accent"
             (click)="onClickAddGroup(inputGroupName.value)"
             class="mat-accent"
+            [disabled]="inputForm.invalid"
           >
             {{ 'group.addNew' | translate }}
           </button>

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.ts

@@ -21,6 +21,8 @@ import {
 import { GroupDetailData, UserInfo } from '@ucap-webmessenger/protocol-sync';
 import { environment } from '../../../../../environments/environment';
 import { TranslateService } from '@ngx-translate/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { StringUtil } from '@ucap-webmessenger/core';
 
 export interface SelectGroupDialogData {
   title: string;
@@ -38,6 +40,9 @@ export interface SelectGroupDialogResult {
   styleUrls: ['./select-group.dialog.component.scss']
 })
 export class SelectGroupDialogComponent implements OnInit {
+  groupName: string;
+  inputForm: FormGroup;
+
   constructor(
     public dialogRef: MatDialogRef<
       SelectGroupDialogData,
@@ -46,7 +51,8 @@ export class SelectGroupDialogComponent implements OnInit {
     @Inject(MAT_DIALOG_DATA) public data: SelectGroupDialogData,
     private store: Store<any>,
     private dialogService: DialogService,
-    private translateService: TranslateService
+    private translateService: TranslateService,
+    private formBuilder: FormBuilder
   ) {}
 
   @ViewChild('groups', { static: true }) groups: MatSelectionList;
@@ -57,6 +63,10 @@ export class SelectGroupDialogComponent implements OnInit {
   isShowAddGroupField = false;
 
   ngOnInit(): void {
+    this.inputForm = this.formBuilder.group({
+      groupName: ['', [Validators.required, StringUtil.checkSpecialCharacter()]]
+    });
+
     this.groups.selectionChange.subscribe((s: MatSelectionListChange) => {
       this.groups.deselectAll();
       s.option.selected = true;

projects/ucap-webmessenger-core/src/lib/utils/string.util.ts

@@ -1,3 +1,5 @@
+import { ValidatorFn, AbstractControl } from '@angular/forms';
+
 export enum CharactorType {
   Number = 'Number',
   Charactor = 'Charactor',
@@ -128,7 +130,7 @@ export class StringUtil {
   }
 
   /**
-   * isIncrements
+   * isDecrements
    */
   public static isDecrements(target: string, repeatTime: number) {
     for (let i = 0; i < target.length - (repeatTime - 1); i++) {
@@ -181,4 +183,13 @@ export class StringUtil {
   public static isAlphaNumeric(char: number): boolean {
     return StringUtil.isAlphabet(char) || StringUtil.isNumeric(char);
   }
+
+  public static checkSpecialCharacter(): ValidatorFn {
+    return (control: AbstractControl): { [key: string]: any } | null => {
+      const forbidden = /[\{\}\[\]\/?.;:|\)*~`!^+<>@\#$%&\\\=\(\'\"]/g.test(
+        control.value
+      );
+      return forbidden ? { groupName: { value: control.value } } : null;
+    };
+  }
 }