아이디 중복 체크 완료

src/app/modules/admin/member/partner/components/list.component.ts

@@ -202,7 +202,9 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   __onClickRegist(event: MouseEvent): void {
-    const dialogRef = this._matDialog.open(RegistComposeComponent);
+    const dialogRef = this._matDialog.open(RegistComposeComponent, {
+      data: { title: '대본', parentId: 'kgon2' },
+    });
 
     dialogRef.afterClosed().subscribe((result) => {
       console.log('Compose dialog was closed!');

src/app/modules/admin/member/partner/compose/regist-compose.component.html

@@ -3,7 +3,7 @@
   <div
     class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary"
   >
-    <div class="text-lg font-medium">대본사 생성</div>
+    <div class="text-lg font-medium">{{ data.title }} 등록</div>
     <button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
       <mat-icon
         class="text-current"
@@ -27,6 +27,9 @@
     <mat-form-field>
       <mat-label>사이트명</mat-label>
       <input matInput [formControlName]="'siteName'" />
+      <mat-error *ngIf="composeForm.get('siteName')?.hasError('required')">
+        사이트명은 필수 입력입니다.
+      </mat-error>
     </mat-form-field>
 
     <!-- Bcc -->
@@ -37,47 +40,79 @@
         [formControlName]="'signinId'"
         (focusout)="__checkSigninId($event)"
       />
+      <mat-error *ngIf="composeForm.get('signinId')?.hasError('required')">
+        아이디는 필수 입력입니다.
+      </mat-error>
+      <mat-error
+        *ngIf="composeForm.get('signinId')?.hasError('signinIdDuplicate')"
+      >
+        아이디가 중복됩니다.
+      </mat-error>
     </mat-form-field>
 
     <!-- Subject -->
     <mat-form-field>
       <mat-label>비밀번호</mat-label>
       <input matInput [formControlName]="'password'" />
+      <mat-error *ngIf="composeForm.get('password')?.hasError('required')">
+        비밀번호는 필수 입력입니다.
+      </mat-error>
     </mat-form-field>
 
     <mat-form-field>
       <mat-label>환전 비밀번호</mat-label>
       <input matInput [formControlName]="'exchangePw'" />
+      <mat-error *ngIf="composeForm.get('exchangePw')?.hasError('required')">
+        환전 비밀번호 필수 입력입니다.
+      </mat-error>
     </mat-form-field>
 
     <mat-form-field>
       <mat-label>닉네임</mat-label>
       <input matInput [formControlName]="'nickname'" />
+      <mat-error *ngIf="composeForm.get('nickname')?.hasError('required')">
+        닉네임은 필수 입력입니다.
+      </mat-error>
     </mat-form-field>
 
     <mat-form-field>
       <mat-label>정산종류</mat-label>
       <input matInput [formControlName]="'calculateType'" />
+      <mat-error *ngIf="composeForm.get('calculateType')?.hasError('required')">
+        정산종류는 필수 입력입니다.
+      </mat-error>
     </mat-form-field>
 
     <mat-form-field>
       <mat-label>휴대폰번호</mat-label>
       <input matInput [formControlName]="'phoneNumber'" />
+      <mat-error *ngIf="composeForm.get('phoneNumber')?.hasError('required')">
+        휴대폰번호는 필수 입력입니다.
+      </mat-error>
     </mat-form-field>
 
     <mat-form-field>
       <mat-label>은행명</mat-label>
       <input matInput [formControlName]="'bankName'" />
+      <mat-error *ngIf="composeForm.get('bankName')?.hasError('required')">
+        은행명은 필수 입력입니다.
+      </mat-error>
     </mat-form-field>
 
     <mat-form-field>
       <mat-label>계좌번호</mat-label>
       <input matInput [formControlName]="'accountNumber'" />
+      <mat-error *ngIf="composeForm.get('accountNumber')?.hasError('required')">
+        계좌번호는 필수 입력입니다.
+      </mat-error>
     </mat-form-field>
 
     <mat-form-field>
       <mat-label>예금주</mat-label>
       <input matInput [formControlName]="'accountHolder'" />
+      <mat-error *ngIf="composeForm.get('accountHolder')?.hasError('required')">
+        예금주는 필수 입력입니다.
+      </mat-error>
     </mat-form-field>
 
     <!-- Body -->

src/app/modules/admin/member/partner/compose/regist-compose.component.ts

@@ -1,4 +1,10 @@
-import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  OnInit,
+  ViewEncapsulation,
+} from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { IdentityService } from 'app/modules/polyglot/member/services/identity.service';
@@ -47,7 +53,8 @@ export class RegistComposeComponent implements OnInit {
     public matDialogRef: MatDialogRef<RegistComposeComponent>,
     @Inject(MAT_DIALOG_DATA) public data: RegistComposeData,
     private _formBuilder: FormBuilder,
-    private _identityService: IdentityService
+    private _identityService: IdentityService,
+    private _changeDetectorRef: ChangeDetectorRef
   ) {}
 
   // -----------------------------------------------------------------------------------------------------
@@ -60,17 +67,17 @@ export class RegistComposeComponent implements OnInit {
   ngOnInit(): void {
     // Create the form
     this.composeForm = this._formBuilder.group({
-      partnerId: [{ value: 'kgon4', disabled: true }],
-      siteName: [''],
-      signinId: [''],
-      password: [''],
-      exchangePw: [''],
-      nickname: [''],
-      calculateType: [''],
-      phoneNumber: [''],
-      bankName: [''],
-      accountNumber: [''],
-      accountHolder: [''],
+      partnerId: [{ value: this.data.parentId, disabled: true }],
+      siteName: ['', [Validators.required]],
+      signinId: ['', [Validators.required]],
+      password: ['', [Validators.required]],
+      exchangePw: ['', [Validators.required]],
+      nickname: ['', [Validators.required]],
+      calculateType: ['', [Validators.required]],
+      phoneNumber: ['', [Validators.required]],
+      bankName: ['', [Validators.required]],
+      accountNumber: ['', [Validators.required]],
+      accountHolder: ['', [Validators.required]],
     });
   }
 
@@ -125,7 +132,28 @@ export class RegistComposeComponent implements OnInit {
     this._identityService
       .checkUsernameForDuplication(signinId)
       .then((isUse: boolean) => {
-        console.log('check username: ', isUse);
+        if (!!isUse) {
+          this.composeForm
+            .get('signinId')
+            ?.setErrors({ signinIdDuplicate: true });
+        }
+        this._changeDetectorRef.markForCheck();
       });
   }
+
+  // checkSameName(): ValidatorFn {
+  //   return (control: AbstractControl): { [key: string]: any } | null => {
+  //     if (
+  //       !control ||
+  //       !control.value ||
+  //       !this.groupList ||
+  //       0 === this.groupList.length
+  //     ) {
+  //       return null;
+  //     }
+  //     const v = (control.value as string).trim();
+  //     const ban = -1 < this.groupList.findIndex((g) => g.name === v);
+  //     return ban ? { groupNameSamed: { value: control.value } } : null;
+  //   };
+  // }
 }

src/app/modules/polyglot/member/services/identity.service.ts

@@ -48,6 +48,7 @@ export class IdentityService {
         )
         .then((result) => {
           console.log('success', result, result.getDuplicated());
+          resolve(result.getDuplicated());
         })
         .catch((e: Error) => {
           console.log('failed', e);