validation of group name is modified

This commit is contained in:
richard-loafle 2020-02-06 17:49:05 +09:00
parent e518ed386e
commit 619ebe4e61
4 changed files with 67 additions and 5 deletions

View File

@ -26,8 +26,17 @@
maxlength="20" maxlength="20"
placeholder="{{ 'group.name' | translate }}" placeholder="{{ 'group.name' | translate }}"
formControlName="groupName" formControlName="groupName"
(keyup)="onKeyupGroupName()"
/> />
<mat-hint align="end">{{ input.value?.length || 0 }}/20</mat-hint> <mat-hint align="end">{{ input.value?.length || 0 }}/20</mat-hint>
<mat-error
*ngIf="inputForm.get('groupName').hasError('groupNameBanned')"
>
{{
'group.errors.bannedWords'
| translate: { bannedWords: bannedWords.join(',') }
}}
</mat-error>
</mat-form-field> </mat-form-field>
</form> </form>
</div> </div>

View File

@ -20,7 +20,7 @@ import {
} from '@angular/material'; } from '@angular/material';
import { NGXLogger } from 'ngx-logger'; import { NGXLogger } from 'ngx-logger';
import { Observable, combineLatest, Subscription, of } from 'rxjs'; import { Observable, combineLatest, Subscription, of } from 'rxjs';
import { map, tap, catchError } from 'rxjs/operators'; import { map, tap, catchError, take } from 'rxjs/operators';
import { Store, select } from '@ngrx/store'; import { Store, select } from '@ngrx/store';
import * as AppStore from '@app/store'; import * as AppStore from '@app/store';
@ -62,7 +62,7 @@ import {
AlertDialogResult, AlertDialogResult,
AlertDialogData AlertDialogData
} from '@ucap-webmessenger/ui'; } from '@ucap-webmessenger/ui';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService, TranslateParser } from '@ngx-translate/core';
import { environment } from '../../../../../environments/environment'; import { environment } from '../../../../../environments/environment';
export interface CreateChatDialogData { export interface CreateChatDialogData {
@ -115,11 +115,38 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
private logger: NGXLogger, private logger: NGXLogger,
private dialogService: DialogService, private dialogService: DialogService,
private translateService: TranslateService, private translateService: TranslateService,
private translateParser: TranslateParser,
private changeDetectorRef: ChangeDetectorRef private changeDetectorRef: ChangeDetectorRef
) { ) {
this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>( this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
KEY_VER_INFO KEY_VER_INFO
); );
const banKeys: string[] = [
'group.nameFavorite',
'group.nameMyDept',
'group.nameDefault'
];
const currentLang = this.translateService.currentLang;
const langs = ['ko', 'en'];
langs.forEach(lang => {
this.translateService
.getTranslation(lang)
.pipe(take(1))
.subscribe(
translation => {
banKeys.forEach(banKey => {
this.bannedWords.push(
this.translateParser.getValue(translation, banKey)
);
});
},
error => {},
() => {}
);
});
} }
currentTabIndex: number; currentTabIndex: number;
@ -162,6 +189,8 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
inputForm: FormGroup; inputForm: FormGroup;
bannedWords: string[] = [];
ngOnInit() { ngOnInit() {
const loginInfo = this.sessionStorageService.get<LoginInfo>(KEY_LOGIN_INFO); const loginInfo = this.sessionStorageService.get<LoginInfo>(KEY_LOGIN_INFO);
this.companyCode = loginInfo.companyCode; this.companyCode = loginInfo.companyCode;
@ -283,7 +312,14 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
.subscribe(); .subscribe();
this.inputForm = this.formBuilder.group({ this.inputForm = this.formBuilder.group({
groupName: ['', [Validators.required, this.checkSpecialCharacter()]] groupName: [
'',
[
Validators.required,
this.checkSpecialCharacter(),
this.checkBanWords()
]
]
}); });
if (this.data.type === UserSelectDialogType.EditChatMember) { if (this.data.type === UserSelectDialogType.EditChatMember) {
@ -302,6 +338,17 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
}; };
} }
checkBanWords(): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
if (!control || !control.value) {
return null;
}
const ban =
-1 < this.bannedWords.indexOf((control.value as string).trim());
return ban ? { groupNameBanned: { value: control.value } } : null;
};
}
ngOnDestroy(): void { ngOnDestroy(): void {
if (!!this.roomSubscription) { if (!!this.roomSubscription) {
this.roomSubscription.unsubscribe(); this.roomSubscription.unsubscribe();
@ -754,4 +801,8 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
: undefined : undefined
}); });
} }
onKeyupGroupName() {
this.inputForm.get('groupName').markAsTouched();
}
} }

View File

@ -177,7 +177,8 @@
"confirmRemoveGroup": "Are you sure you want to delete the group {{nameOfGroup}}?<br/>Group members will only be deleted from that group.", "confirmRemoveGroup": "Are you sure you want to delete the group {{nameOfGroup}}?<br/>Group members will only be deleted from that group.",
"errors": { "errors": {
"label": "Group errors", "label": "Group errors",
"requireName": "Group name is required." "requireName": "Group name is required.",
"bannedWords": "Prohibited word. [{{bannedWords}}]"
} }
}, },
"chat": { "chat": {

View File

@ -177,7 +177,8 @@
"confirmRemoveGroup": "그룹({{nameOfGroup}})을 삭제하시겠습니까?<br/>그룹 멤버는 해당 그룹에서만 삭제됩니다.", "confirmRemoveGroup": "그룹({{nameOfGroup}})을 삭제하시겠습니까?<br/>그룹 멤버는 해당 그룹에서만 삭제됩니다.",
"errors": { "errors": {
"label": "그룹 에러", "label": "그룹 에러",
"requireName": "그룹명은 필수입력입니다." "requireName": "그룹명은 필수입력입니다.",
"bannedWords": "금지단어 [{{bannedWords}}]"
} }
}, },
"chat": { "chat": {